Configurations
variables
border-width-s
Since 1.0.0$border-width-s: 1px !default;Description
Sets the default border width for small borders.
Type
variable
border-width-m
Since 1.0.0$border-width-m: 2px !default;Description
Sets the default border width for medium borders.
Type
variable
border-width-l
Since 1.0.0$border-width-l: 4px !default;Description
Sets the default border width for large borders.
Type
variable
border-width-xl
Since 1.0.0$border-width-xl: 6px !default;Description
Sets the default border width for extra-large borders.
Type
variable
colors-brand
Since 1.0.0$colors-brand: (
'blue': (
'dark': #091C44, // rgb(9, 28, 68)
'base': #082B73, // rgb(8, 43, 115)
'mid': #004990, // rgb(0, 73, 144)
'bright': (
'base': #5387F7, // rgb(83, 135, 247)
'accessible': #336BE6 // rgb(51, 107, 230)
),
'light': #D0DEFD // rgb(208, 222, 253)
),
'gold': (
'base': #E9BF55 // rgb(233, 191, 85)
),
'charcoal': (
'base': #605858 // rgb(96, 88, 88)
),
'slate': (
'base': #B6BDCC, // rgb(182, 189, 204)
'light': #E7EAF1 // rgb(231, 234, 241)
),
'black': (
'base': #000000 // rgb(0, 0, 0)
),
'white': (
'base': #FFFFFF // rgb(255, 255, 255)
)
) !default;Description
Indentifies the brand's color palette.
This map uses a naming scheme compatible
with Brandy's color() function.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
blue |
The blue color palette of Emory Libraries |
map
|
— none |
blue.dark |
A dark variation of our blue |
color
|
|
blue.base |
Our base blue color |
color
|
|
blue.mid |
A mid variation of our blue |
color
|
|
blue.bright |
A set of bright variations of our blue |
map
|
— none |
blue.bright.base |
The base version of the bright variation of our blue |
color
|
|
blue.bright.accessible |
An accessible version of the bright variation of our blue |
color
|
|
blue.light |
A light variation of our blue |
color
|
|
gold |
The gold color palette of Emory Libraries |
map
|
— none |
gold.base |
Our base gold color |
color
|
|
charcoal |
The charcoal color palette of Emory Libraries |
map
|
— none |
charcoal.base |
Our base charcoal color |
color
|
|
slate |
The slate color palette of Emory Libraries |
map
|
— none |
slate.base |
Our base slate color |
color
|
|
slate.light |
A light variation of our slate |
color
|
|
black |
The black color palette of Emory Libraries |
map
|
— none |
black.base |
Our base black color |
color
|
|
white |
The white color palette of Emory Libraries |
map
|
— none |
white.base |
Our base white color |
color
|
|
Links
colors-ui
Since 1.0.0$colors-ui: (
'error': (
'base': #B82216, // rgb(184, 34, 22)
'light': #EABDB9, // rgb(234, 189, 185)
'mid': #E61D03,
'bright': #FA5555
),
'success': (
'base': #257611, // rgb(37, 118, 17)
'light': #E0F6DA, // rgb(224, 246, 218)
'mid': #1DB003,
'bright': #6EED57
),
'caution': (
'base': #AB750C, // rgb(171, 117, 12)
'light': #F6E4C1, // rgb(246, 228, 193)
'mid': #D69A03,
'bright': map-deep-get($colors-brand, 'gold.base')
),
'info': (
'base': map-deep-get($colors-brand, 'blue.base'),
'light': map-deep-get($colors-brand, 'blue.light'),
'mid': map-deep-get($colors-brand, 'blue.mid'),
'bright': map-deep-get($colors-brand, 'blue.bright.base')
)
) !default;Description
Identifies the user interface color palette.
This map uses a naming scheme compatible
with the Brandy's color() function.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
error |
Semantic colors for errors |
map
|
— none |
error.base |
The base error color |
color
|
|
error.light |
A light variation of the base error color |
color
|
|
success |
Semantic colors for success |
map
|
— none |
success.base |
The base success color |
color
|
|
success.light |
A light variation of the base success color |
color
|
|
caution |
Semantic colors for cautions |
map
|
— none |
caution.base |
The base caution color |
color
|
|
caution.light |
A light variation of the base caution color |
color
|
|
info |
Semantic colors for information |
map
|
— none |
info.base |
The base info color |
color
|
|
info.light |
A light variation of the base info color |
color
|
|
Links
colors
Since 1.0.0$colors: map-extend($colors-brand, ('ui': $colors-ui)) !default;Description
Compiles the complete color set composed of both brand and UI colors.
Type
variable
Requires
-
external
Brandy::map-extend
brandy-colors-map
Since 1.0.0$brandy-colors-map: $colors;Description
Sets the default color map used by Brandy
to the chosen color set, making it available
through the color() function.
Type
variable
Requires
-
external
Brandy::brandy-colors-map
Links
color-text-dark
Since 1.0.0$color-text-dark: color('charcoal') !default;Description
Sets the default color for dark text. This is the font color that will used as our base foreground color over light backgrounds.
Type
variable
color-text-light
Since 1.0.0$color-text-light: color('white') !default;Description
Sets the default color for light text. This is the font color that will used as our base foreground color over dark backgrounds.
Type
variable
color-heading
Since 1.0.0$color-heading: color('blue', 'dark') !default;Description
Sets the default color for major headings. This is the font color that will used as our base foreground color for headings over light backgrounds.
Type
variable
color-actionable
Since 1.0.0$color-actionable: color('blue', 'bright', 'accessible') !default;Description
Sets the default color for actionable text. This is the font color that will used as our base foreground color for things like links and buttons when over light backgrounds.
Type
variable
brandy-dark-text
Since 1.0.0$brandy-dark-text: $color-text-dark;Description
Defines the default dark text color used
by Brandy's color-contrast() function.
Type
variable
Requires
-
external
Brandy::brandy-dark-text
Links
brandy-light-text
Since 1.0.0$brandy-light-text: $color-text-light;Description
Defines the default light text color used
by Brandy's color-contrast() function.
Type
variable
Requires
-
external
Brandy::brandy-light-text
Links
config
Since 1.0.0$config: (
'path': (
'icons': '../icons',
'fonts': '../fonts'
)
);Description
Indentifies the configuration set.
This map uses a schema compatible
with Brandy's config() function.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
path |
A set of paths |
map
|
— none |
path.icons |
The path to the icons directory |
string
|
|
Links
brandy-config-map
Since 1.0.0$brandy-config-map: $config;Description
Sets the default configuration map
used by Brandy to the chosen configuration
set, making it available through the
config() function.
Type
variable
Requires
-
external
Brandy::brandy-config-map
Links
fonts
Since 1.0.0$fonts: (
'heading': (
'h1': ('Cardo', serif),
'h1-alt': ('Cardo', serif),
'h1-hero': ('Cardo', serif),
'h2': ('Cardo', serif),
'h3': ('Open Sans', sans-serif),
'h4': ('Cardo', serif),
'h5': ('Cardo', serif),
'h5-alt': ('Open Sans', sans-serif),
'h6': ('Open Sans', sans-serif)
),
'body': ('Open Sans', sans-serif),
'body-alt': ('Open Sans', sans-serif),
'lead': ('Cardo', serif),
'blockquote': ('Cardo', serif),
'button': ('Open Sans', sans-serif),
'badge': ('Open Sans', sans-serif),
'listing': ('Cardo', serif),
'accent': ('Cardo', serif),
'label': ('Open Sans', sans-serif),
'data': ('Open Sans', sans-serif),
'caption': ('Cardo', serif)
) !default;Description
Indentifies the brand's font set.
This map uses a naming scheme compatible
with Brandy's font() function.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
heading |
A collection of fonts used for headings |
map
|
— none |
heading.h1 |
The default font for H1 headings |
font
|
|
heading.h2 |
The default font for H2 headings |
font
|
|
heading.h3 |
The default font for H3 headings |
font
|
|
heading.h4 |
The default font for H4 headings |
font
|
|
heading.h5 |
The default font for H5 headings |
font
|
|
heading.h6 |
The default font for H6 headings |
font
|
|
heading.topic |
The default font for headings that represent topic shifts within body content |
font
|
|
body |
The default font for body text |
font
|
|
blockquote |
The default font for blockquotes |
font
|
|
button |
The default font for button text |
font
|
|
headline |
The default font for headlines |
font
|
|
listing |
The default font for listing items |
font
|
|
accent |
The default font used for accent text |
font
|
|
Links
brandy-fonts-map
Since 1.0.0$brandy-fonts-map: $fonts;Description
Sets the default font map used by Brandy
to the chosen font set, making it available
through the font() function.
Type
variable
Requires
-
external
Brandy::brandy-fonts-map
Links
font-size
Since 1.0.0$font-size: 16px !default;Description
Sets the default font size for all text within the project. This is the font size that will used as our base for 1(r)em.
Type
variable
font-line-height
Since 1.0.0$font-line-height: 1.9375 !default;Description
Sets the default line height for all text within the project. This is the line height that will used as our base for other line heights.
Type
variable
brandy-font-size
Since 1.0.0$brandy-font-size: $font-size;Description
Sets the default font size used by Brandy to the chosen font size for use with resizing functions.
Type
variable
Requires
-
external
Brandy::brandy-font-size
fonts-scale
Since 1.0.0$fonts-scale: (
'heading': (
'h1': 4.5, // 72px
'h1-alt': 3, // 48px
'h1-hero': 3.125, // 50px
'h2': 3, // 48px
'h3': 1.5, // 24px
'h4': 1.75, // 28px
'h5': 1.625, // 26px
'h5-alt': 1.375, // 22px
'h6': .75, // 12px
),
'body': 1, // 16px
'body-alt': .875, // 14px
'lead': 1.75, // 28px
'blockquote': 3, // 48px
'button': .6875, // 11px
'badge': .75, // 12px
'listing': 1.375, // 22px
'accent': 1.125, // 18px
'label': .625, // 10px
'data': .75, // 12px,
'caption': 1 // 16px
) !default;Description
Determines the scale for various fonts
based on the default font size. This map
should be identical to the fonts map but
use ratios to represent the font's size as
a percentage of our default font size.
Type
variable
layout-y-min
Since 1.0.0$layout-y-min: 40px !default;Description
Sets the minimum vertical layout spacing.
Type
variable
layout-y-max
Since 1.0.0$layout-y-max: 70px !default;Description
Sets the maximum vertical layout spacing.
Type
variable
layout-x-min
Since 1.0.0$layout-x-min: 20px !default;Description
Sets the minimum horizontal layout spacing.
Type
variable
layout-x-max
Since 1.0.0$layout-x-max: 170px !default;Description
Sets the maximum horizontal layout spacing.
Type
variable
layout-scale-y
Since 1.0.0$layout-scale-y: layout-scale($layout-y-min, $layout-y-max) !default;Description
Sets vertical layout scale for resizing layouts across breakpoints.
Type
variable
Requires
-
variable
layout-y-min -
variable
layout-y-max -
variable
screens
layout-scale-x
Since 1.0.0$layout-scale-x: layout-scale($layout-x-min, $layout-x-max) !default;Description
Sets horizontal layout scale for resizing layouts across breakpoints.
Type
variable
Requires
-
variable
layout-x-min -
variable
layout-x-max -
variable
screens
layout-y
Since 1.0.0$layout-y: layout-breakpoints($layout-scale-y) !default;Description
Sets layout spacing accross breakpoint.
Type
variable
Requires
-
variable
layout-scale-y -
variable
screens
layout-x
Since 1.0.0$layout-x: layout-breakpoints($layout-scale-x) !default;Description
Sets layout spacing accross breakpoint.
Type
variable
Requires
-
variable
layout-scale-x -
variable
screens
rhythm-y
Since 1.0.0$rhythm-y: 2em !default;Description
Sets the default vertical rhythm.
Type
variable
rhythm-x
Since 1.0.0$rhythm-x: 1em !default;Description
Sets the default horizontal rhythm.
Type
variable
screen-s
Since 1.0.0$screen-s: 600px !default;Description
Sets the breakpoint for small screens. This number should represent a breakpoint that includes the most common screen sizes for mobile devices when in potrait mode. This breakpoint should also represent the smallest typical screen size for tablets in portrait mode.
Type
variable
screen-m
Since 1.0.0$screen-m: 900px !default;Description
Sets the breakpoint for medium screens. This number should represent a breakpoint that includes the most common screen sizes for tablet devices when in portrait mode. This breakpoint should also represent the smallest typical screen size for tablets in landscape mode.
Type
variable
screen-l
Since 1.0.0$screen-l: 1200px !default;Description
Sets the breakpoint for large screens. This number should represent a breakpoint that includes the most common screen sizes for tablet devices when in landscape mode. This breakpoint should also represent the smallest typical screen size for laptops and desktops.
Type
variable
screens
Since 1.0.0$screens: (
's': max-width $screen-s,
'm': ($screen-s + 1) $screen-m,
'l': min-width ($screen-m + 1),
'xl': min-width $screen-l
) !default;Description
Compiles our commonly used breakpoints
into a range that can used with Breakpoint
to easily build @media queries. This
map uses a schema compatible with
Brandy's screen() function.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
s |
The main breakpoint for small screens |
mixed
|
|
m |
The main breakpoint for medium screens |
mixed
|
|
l |
The main breakpoint for large screens |
mixed
|
|
xl |
The main breakpoint for extra-large screens |
mixed
|
|
Requires
Links
brandy-screens-map
Since 1.0.0$brandy-screens-map: $screens;Description
Sets the default screens map used by Brandy
to the chosen set of breakpoints, making it available
through the screen() function.
Type
variable
Requires
-
external
Brandy::brandy-screens-map
Links
transition-duration
Since 1.0.0$transition-duration: .25s !default;Description
Sets the default transition duration.
Type
variable
transition-timing
Since 1.0.0$transition-timing: ease !default;Description
Sets the default transition timing.
Type
variable
transition-all
Since 1.0.0$transition-all: all $transition-duration $transition-timing !default;Description
Sets the default transition all.
Type
variable
z
Since 1.0.0$z: (
'lost': -99999,
'below': -1,
'default': auto,
'above': 1,
'docked': 5,
'dropdown': 10,
'modal': 100,
'popup': 500,
'spinner': 1000,
'alert': 2000
) !default;Description
Indentifies z-index layers.
This map uses a schema compatible
with Brandy's z() function.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
lost |
— none |
number
|
|
below |
— none |
number
|
|
default |
— none |
number
|
|
above |
— none |
number
|
|
docked |
— none |
number
|
|
dropdown |
— none |
number
|
|
modal |
— none |
number
|
|
popup |
— none |
number
|
|
spinner |
— none |
number
|
|
alert |
— none |
number
|
|
Links
brandy-z-map
Since 1.0.0$brandy-z-map: $z;Description
Sets the default z-index layer map used
by Brandy to the chosen z-index map,
making it available through the z()
function.
Type
variable
Requires
-
external
Brandy::brandy-z-map
Links
Core
css
body
body { ... }Description
Initializes core body styles.
*
* { ... }Description
Resets the positioning and box model for all elements.
Patterns
Atoms
badge
mixins
atoms-badge review
Since 1.0.0@mixin atoms-badge($custom) { ... }Description
Builds a constructor for the badge component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our badge component
Requires
-
placeholder
atoms-badge -
variable
atoms-badge -
mixin
atoms-badge--theme -
external
Brandy::map-extend
atoms-badge--theme
Since 1.0.0@mixin atoms-badge--theme($skin) { ... }Description
Defines the badge component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The badge component's themeable properties
Requires
-
mixin
tokens-text -
external
Brandy::map-deep-get -
external
Brandy::color-contrast -
external
Brandy::strip-unit -
external
Brandy::px
variables
atoms-badge
Since 1.0.0$atoms-badge: (
'background': color('gold'),
'foreground': color('blue'),
'edge': (
'size': 5px,
'angle': 3deg
),
'radius': 4px
);Description
Defines the base skin of the badge component.
Type
variable
placeholders
atoms-badge
Since 1.0.0%atoms-badge { ... }Description
Defines the base structure of the badge component.
Requires
-
variable
rhythm-y
button
mixins
atoms-button review
Since 1.0.0@mixin atoms-button($custom) { ... }Description
Builds a constructor for the button component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our button component
Requires
-
placeholder
atoms-button -
variable
atoms-button -
mixin
atoms-button--theme -
external
Brandy::map-extend
atoms-button--theme
Since 1.0.0@mixin atoms-button--theme($skin) { ... }Description
Defines the button component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The button component's themeable properties
Requires
-
mixin
tokens-text -
external
Brandy::map-deep-get -
external
Brandy::color-contrast
variables
atoms-button
Since 1.0.0$atoms-button: (
'size': 50px,
'padding': 25px,
'background': (
'normal': $color-actionable,
'hover': color('blue', 'mid'),
'active': color('blue', 'mid'),
'hollow': color('blue', 'light')
),
'foreground': (
'normal': $color-text-light,
'hover': $color-text-light,
'active': $color-text-light,
'hollow': $color-actionable
),
'fade': .5,
'border': $border-width-s,
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'icon': (
'offset': $rhythm-x
),
'group': (
'gap': (
'x': 15px,
'y': 15px
)
)
);Description
Defines the base skin of the button component.
Type
variable
Map structure
| variable key Name | variable key Description | variable key Type | variable key Value |
|---|---|---|---|
color |
Assigns the component's color properties |
map
|
— none |
color.normal |
The component's normal color |
color
|
|
color.normal |
The component's color on hover/focus |
color
|
|
border |
The component's border width |
number
|
|
transition |
Assigns the component's transition properties |
map
|
— none |
transition.duration |
The component's transition duration |
number
|
|
transition.timing |
The component's transition timing |
number
|
|
Requires
-
variable
color-actionable -
variable
border-width-s -
variable
transition-duration -
variable
transition-timing
placeholders
atoms-button
Since 1.0.0%atoms-button { ... }Description
Defines the base structure of the button component.
Requires
-
external
Brandy::absolute-center-contents -
external
Brandy::padding-x
callout
mixins
atoms-callout review
Since 1.0.0@mixin atoms-callout($custom) { ... }Description
Builds a constructor for the callout component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our callout component
Requires
-
placeholder
atoms-callout -
variable
atoms-callout -
mixin
atoms-callout--theme -
external
Brandy::map-extend
atoms-callout--theme
Since 1.0.0@mixin atoms-callout--theme($skin) { ... }Description
Defines the callout component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The callout component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
atoms-callout
Since 1.0.0$atoms-callout: (
'background': color('slate', 'light'),
'padding': (
'x': 50px,
'y': 50px
),
'border': (
'color': rgba(color('charcoal'), .2),
'thickness': $border-width-s,
'offset': 15px
),
'spacing': $rhythm-y
);Description
Defines the base skin of the callout component.
Type
variable
placeholders
atoms-callout
Since 1.0.0%atoms-callout { ... }Description
Defines the base structure of the callout component.
copyright
mixins
atoms-copyright review
Since 1.0.0@mixin atoms-copyright($custom) { ... }Description
Builds a constructor for the copyright component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our copyright component
Requires
-
placeholder
atoms-copyright -
variable
atoms-copyright -
mixin
atoms-copyright--theme -
external
Brandy::map-extend
atoms-copyright--theme
Since 1.0.0@mixin atoms-copyright--theme($skin) { ... }Description
Defines the copyright component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The copyright component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
atoms-copyright
Since 1.0.0$atoms-copyright: (
'spacing': 25px,
'padding': 20px,
'size': (
'min': 12px,
'max': 13px
),
'color': (
'normal': color('blue', 'light'),
'hover': color('blue', 'bright'),
'active': color('blue', 'light')
),
'font': (
'font-family': font('body'),
'font-style': normal,
'font-weight': normal,
'line-height': 1.7692
),
'divider': "|"
);Description
Defines the base skin of the copyright component.
Type
variable
placeholders
atoms-copyright
Since 1.0.0%atoms-copyright { ... }Description
Defines the base structure of the copyright component.
Requires
-
mixin
breakpoints -
mixin
breakpoints -
mixin
breakpoints
image
mixins
atoms-image review
Since 1.0.0@mixin atoms-image($custom) { ... }Description
Builds a constructor for the image component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our image component
Requires
-
placeholder
atoms-image -
variable
atoms-image -
mixin
atoms-image--theme -
external
Brandy::map-extend
atoms-image--theme
Since 1.0.0@mixin atoms-image--theme($skin) { ... }Description
Defines the image component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The image component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
atoms-image
Since 1.0.0$atoms-image: (
'widths': (
'quarter': 25%,
'third': 33.333%,
'half': 50%,
'two-third': 66.667%,
'three-quarter': 75%,
'full': 100%,
'auto': auto
),
'spacing': 1em
);Description
Defines the base skin of the image component.
Type
variable
placeholders
atoms-image
Since 1.0.0%atoms-image { ... }Description
Defines the base structure of the image component.
input
mixins
atoms-input review
Since 1.0.0@mixin atoms-input($custom) { ... }Description
Builds a constructor for the input component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our input component
Requires
-
placeholder
atoms-input -
variable
atoms-input -
mixin
atoms-input--theme -
external
Brandy::map-extend
atoms-input--theme
Since 1.0.0@mixin atoms-input--theme($skin) { ... }Description
Defines the input component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The input component's themeable properties
Requires
-
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
variable
font-size -
mixin
tokens-text -
external
Brandy::map-deep-get -
external
Brandy::placeholder
variables
atoms-input
Since 1.0.0$atoms-input: (
'border': (
'thickness': $border-width-s,
'color': color('slate')
),
'radius': 5px,
'alpha': .5,
'shadow': inset 1px 2px 4px rgba(color('slate'), .5),
'padding': (
'x': 20px,
'y': 10px
),
'spacing': $rhythm-y,
'foreground': $color-text-dark,
'background': color('white'),
'icon': (
'color': color('blue', 'bright'),
'size': 20px,
'spacing': 20px
),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'state': (
'toggle': (
'default': false,
'checked': color('blue')
),
'select': (
'default': false,
'focused': color('slate', 'light')
),
'text': (
'default': false,
'focused': color('blue', 'bright'),
'valid': color('ui', 'success'),
'invalid': color('ui', 'error')
)
),
'label': (
'color': color('blue', 'dark'),
'spacing': (
'x': ($rhythm-x / 2),
'y': ($rhythm-y / 2)
)
),
'checkbox': (
'size': 15px,
'buffer': 2.5px
),
'radio': (
'size': 15px,
'buffer': 2.5px,
'fill': 40%,
'diffuse': 5%
),
'field': (
'spacing': $rhythm-y,
'padding': 20px
),
'container': (
'rows': 2,
'columns': 2,
'gap': $rhythm-x
),
'search': (
'big': (
'font-family': font('accent'),
'font-size': 1.56em,
'line-height': 1.5
),
'small': (
'font-family': font('body'),
'font-size': .78em,
'line-height': 1.7857
)
),
'select': (
'inline': (
'border': (
'thickness': $border-width-s,
'color': color('blue', 'bright')
),
'padding': (
'x': 0px,
'y': 0px
),
'icon': (
'color': color('blue', 'bright'),
'size': 30px,
'spacing': 10px
)
)
)
);Description
Defines the base skin of the input component.
Type
variable
placeholders
atoms-input
Since 1.0.0%atoms-input { ... }Description
Defines the base structure of the input component.
Requires
-
variable
rhythm-y -
variable
rhythm-x -
variable
colors -
function
icon -
external
Brandy::size -
external
Brandy::radial-gradient -
external
Brandy::margin-y -
external
Brandy::color
link
mixins
atoms-link review
Since 1.0.0@mixin atoms-link($custom) { ... }Description
Builds a constructor for the link component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our link component
Requires
-
placeholder
atoms-link -
variable
atoms-link -
mixin
atoms-link--theme -
external
Brandy::map-extend
atoms-link--theme
Since 1.0.0@mixin atoms-link--theme($skin) { ... }Description
Defines the link component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The link component's themeable properties
Requires
-
mixin
tokens-text -
external
Brandy::map-deep-get
variables
atoms-link
Since 1.0.0$atoms-link: (
'color': (
'normal': color('blue', 'bright'),
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
),
'weight': bold,
'style': normal,
'icon': (
'size': 24px,
'spacing': 1ex
),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'popular': (
'font': (
'font-family': font('accent'),
'font-size': 20px,
'font-weight': normal,
'font-style': normal,
'line-height': 2.05
),
'color': (
'normal': $color-text-light,
'hover': $color-actionable,
'active': $color-actionable
)
)
);Description
Defines the base skin of the link component.
Type
variable
placeholders
atoms-link
Since 1.0.0%atoms-link { ... }Description
Defines the base structure of the link component.
list
mixins
atoms-list review
Since 1.0.0@mixin atoms-list($custom) { ... }Description
Builds a constructor for the list component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our list component
Requires
-
placeholder
atoms-list -
variable
atoms-list -
mixin
atoms-list--theme -
external
Brandy::map-extend
atoms-list--theme
Since 1.0.0@mixin atoms-list--theme($skin) { ... }Description
Defines the list component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The list component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
atoms-list
Since 1.0.0$atoms-list: (
'marker': (
'offset': 25px
),
'bulleted': (
'marker': (
'style': 'â– ',
'color': color('blue', 'bright')
)
),
'numbered': (
'marker': (
'style': decimal,
'period': true,
'color': color('blue', 'bright')
)
),
'topics': (
'delimiter': ','
),
'files': (
'gap': 10px
)
);Description
Defines the base skin of the list component.
Type
variable
placeholders
atoms-list
Since 1.0.0%atoms-list { ... }Description
Defines the base structure of the list component.
map
mixins
atoms-map review
Since 1.0.0@mixin atoms-map($custom) { ... }Description
Builds a constructor for the map component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our map component
Requires
-
placeholder
atoms-map -
variable
atoms-map -
mixin
atoms-map--theme -
external
Brandy::map-extend
atoms-map--theme
Since 1.0.0@mixin atoms-map--theme($skin) { ... }Description
Defines the map component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The map component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
atoms-map
Since 1.0.0$atoms-map: (
'width': 100%,
'height': 25%
);Description
Defines the base skin of the map component.
Type
variable
placeholders
atoms-map
Since 1.0.0%atoms-map { ... }Description
Defines the base structure of the map component.
nav-button
note
mixins
atoms-note review
Since 1.0.0@mixin atoms-note($custom) { ... }Description
Builds a constructor for the note component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our note component
Requires
-
placeholder
atoms-note -
variable
atoms-note -
mixin
atoms-note--theme -
external
Brandy::map-extend
atoms-note--theme
Since 1.0.0@mixin atoms-note--theme($skin) { ... }Description
Defines the note component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The note component's themeable properties
Requires
-
mixin
tokens-text -
external
Brandy::map-deep-get
variables
atoms-note
Since 1.0.0$atoms-note: (
'background': color('gold'),
'foreground': color('blue', 'dark'),
'padding': (
'x': $rhythm-x,
'y': 10px
),
'spacing': $rhythm-y / 2,
'radius': 4px,
'font': (
'font-family': font('accent'),
'font-weight': normal,
'font-style': italic,
'font-size': 18px,
'line-height': 1.6111
),
'label': (
'color': color('blue'),
'spacing': $rhythm-x
)
);Description
Defines the base skin of the note component.
Type
variable
placeholders
atoms-note
Since 1.0.0%atoms-note { ... }Description
Defines the base structure of the note component.
rule
mixins
atoms-rule review
Since 1.0.0@mixin atoms-rule($custom) { ... }Description
Builds a constructor for the rule component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our rule component
Requires
-
placeholder
atoms-rule -
variable
atoms-rule -
mixin
atoms-rule--theme -
external
Brandy::map-extend
atoms-rule--theme
Since 1.0.0@mixin atoms-rule--theme($skin) { ... }Description
Defines the rule component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The rule component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
atoms-rule
Since 1.0.0$atoms-rule: (
'styles': (
'default': (
'border': $border-width-s solid rgba(color('blue', 'dark'), .1),
'width': 100%
),
'light': (
'border': $border-width-s solid rgba(color('slate', 'light'), .5),
'width': 100%
),
'dark': (
'border': $border-width-s solid color('blue', 'dark'),
'width': 100%
),
'dotted': (
'border': $border-width-s dotted color('blue', 'bright'),
'width': 100%
),
'thick': (
'border': $border-width-l solid color('blue', 'bright'),
'width': 100%
),
'heading': (
'border': $border-width-xl solid color('gold'),
'width': 60px
),
'feed': (
'border': $border-width-xl solid color('slate', 'light'),
'width': 30px
)
)
);Description
Defines the base skin of the rule component.
Type
variable
placeholders
atoms-rule
Since 1.0.0%atoms-rule { ... }Description
Defines the base structure of the rule component.
search
mixins
atoms-search review
Since 1.0.0@mixin atoms-search($custom) { ... }Description
Builds a constructor for the search component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our search component
Requires
-
placeholder
atoms-search -
variable
atoms-search -
mixin
atoms-search--theme -
external
Brandy::map-extend
atoms-search--theme
Since 1.0.0@mixin atoms-search--theme($skin) { ... }Description
Defines the search component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The search component's themeable properties
Requires
-
mixin
tokens-text -
mixin
atoms-link -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
function
icon-url -
external
Brandy::map-deep-get
variables
atoms-search
Since 1.0.0$atoms-search: (
'size': (
'small': 45px,
'big': 60px
),
'padding': (
'x': 20px,
'y': 10px
),
'spacing': $rhythm-x,
'radius': 2px,
'alpha': .5,
'button': (
'alpha': .5,
'default': (
'background': (
'normal': $color-actionable,
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
),
'foreground': (
'normal': $color-text-light,
'hover': $color-text-light,
'active': $color-text-light
)
),
'contained': (
'icon': (
'id': 'material-search',
'size': 20px,
'color': (
'normal': color('blue', 'bright'),
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
)
)
),
'separator': (
'thickness': $border-width-s,
'size': 60%,
'color': color('slate', 'light')
)
),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
)
);Description
Defines the base skin of the search component.
Type
variable
placeholders
atoms-search
Since 1.0.0%atoms-search { ... }Description
Defines the base structure of the search component.
subnav-button
tab
variables
atoms-tab
Since 1.0.0$atoms-tab: (
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'divider': 1em,
'indicator': 30px,
'theme': "light",
"themes": (
'light': (
'background': color('white'),
'foreground': (
'normal': color('blue', 'mid'),
'hover': $color-actionable,
'active': $color-actionable
),
'border': (
'color': rgba(color('slate'), .5),
'thickness': $border-width-s
)
),
'dark': (
'background': color('blue', 'dark'),
'foreground': (
'normal': color('white'),
'hover': color('slate'),
'active': color('gold')
),
'border': (
'color': rgba(color('slate', 'light'), .25),
'thickness': $border-width-s
)
)
)
);Description
Defines the base skin of the tab component.
Type
variable
mixins
atoms-tab--theme
Since 1.0.0@mixin atoms-tab--theme($skin) { ... }Description
Defines the tab component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The tab component's themeable properties
Requires
-
mixin
atoms-tab--state -
mixin
atoms-tab--state -
mixin
atoms-tab--state -
mixin
atoms-tab--state -
mixin
atoms-tab--state -
mixin
atoms-tab--state -
variable
transition-duration -
variable
transition-timing -
variable
transition-duration -
variable
transition-timing -
mixin
tokens-heading -
mixin
tokens-icon -
external
Brandy::map-deep-get -
external
Brandy::linear-gradient -
external
Brandy::size
atoms-tab--state
Since 1.0.0@mixin atoms-tab--state($state, $skin) { ... }Description
Defines the tab component state.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$state
|
The component's state to be styled |
string
|
— none |
$skin
|
The component's skin |
map
|
— none |
Output
The tab component's themeable properties
Requires
atoms-tab--state--structure
Since 1.0.0@mixin atoms-tab--state--structure($state) { ... }Description
Defines the tab component state structure.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$state
|
The component's state to be structure |
string
|
— none |
Output
The tab component's themeable properties
Requires
-
external
Brandy::map-deep-get
atoms-tab review
Since 1.0.0@mixin atoms-tab($custom) { ... }Description
Builds a constructor for the tab component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our tab component
Requires
-
placeholder
atoms-tab -
variable
atoms-tab -
mixin
atoms-tab--theme -
external
Brandy::map-extend
placeholders
atoms-tab
Since 1.0.0%atoms-tab { ... }Description
Defines the base structure of the tab component.
Requires
-
mixin
atoms-tab--state--structure -
variable
rhythm-y -
variable
rhythm-x -
external
Brandy::absolute-center-contents -
external
Brandy::absolute -
external
Brandy::margin-y -
external
Brandy::z
table
variables
atoms-table
Since 1.0.0$atoms-table: (
'align': left,
'border': (
'thickness': $border-width-s,
'color': color('slate', 'light')
),
'header': (
'background': color('blue', 'dark'),
'foreground': color('gold')
),
'heading': color('blue')
);Description
Defines the base skin of the table component.
Type
variable
mixins
atoms-table--theme
Since 1.0.0@mixin atoms-table--theme($skin) { ... }Description
Defines the table component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The table component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
external
Brandy::map-deep-get -
external
Brandy::color-contrast -
external
Brandy::last-child -
external
Brandy::when-descendant-of
atoms-table review
Since 1.0.0@mixin atoms-table($custom) { ... }Description
Builds a constructor for the table component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our table component
Requires
-
placeholder
atoms-table -
variable
atoms-table -
mixin
atoms-table--theme -
external
Brandy::map-extend
placeholders
atoms-table
Since 1.0.0%atoms-table { ... }Description
Defines the base structure of the table component.
Requires
video
variables
atoms-video
Since 1.0.0$atoms-video: (
'aspect': (
'default': 'hd',
'ratios': (
'standard': 3/4,
'hd': 9/16,
'wide': 1/1.85,
'golden': 1/1.6180,
'square': 1/1,
'academy': 8/11,
'imax': 1/1.43,
'4k': 1/1.9,
'silver': 1/2.414,
'ultrawide': 1/3.6
)
),
'widths': (
'quarter': 25%,
'third': 33.333%,
'half': 50%,
'two-third': 66.667%,
'three-quarter': 75%,
'full': 100%
),
'spacing': 1em
);Description
Defines the base skin of the video component.
Type
variable
mixins
atoms-video--theme
Since 1.0.0@mixin atoms-video--theme($skin) { ... }Description
Defines the video component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The video component's themeable properties
Requires
-
external
Brandy::map-deep-get
atoms-video review
Since 1.0.0@mixin atoms-video($custom) { ... }Description
Builds a constructor for the video component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our video component
Requires
-
placeholder
atoms-video -
variable
atoms-video -
mixin
atoms-video--theme -
external
Brandy::map-extend
placeholders
atoms-video
Since 1.0.0%atoms-video { ... }Description
Defines the base structure of the video component.
Compounds
accordion
mixins
compounds-accordion review
Since 1.0.0-dev.0@mixin compounds-accordion($custom) { ... }Description
Builds a constructor for the accordion component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our accordion component
Requires
-
placeholder
compounds-accordion -
variable
compounds-accordion -
mixin
compounds-accordion--theme -
external
Brandy::map-extend
compounds-accordion--theme
Since 1.0.0-dev.0@mixin compounds-accordion--theme($skin) { ... }Description
Defines the accordion component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The accordion component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
compounds-accordion
Since 1.0.0-dev.0$compounds-accordion: (
'title': color('blue', 'mid'),
'toggle': (
'normal': $color-actionable,
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
),
'separator': (
'color': color('slate'),
'thickness': $border-width-s
),
'spacing': $rhythm-y,
'padding': 15px
);Description
Defines the base skin of the accordion component.
Type
variable
placeholders
compounds-accordion
Since 1.0.0-dev.0%compounds-accordion { ... }Description
Defines the base structure of the accordion component.
blocks
mixins
compounds-blocks review
Since 1.0.0-dev.0@mixin compounds-blocks($custom) { ... }Description
Builds a constructor for the blocks component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our blocks component
Requires
-
placeholder
compounds-blocks -
variable
compounds-blocks -
mixin
compounds-blocks--theme -
external
Brandy::map-extend
compounds-blocks--theme
Since 1.0.0-dev.0@mixin compounds-blocks--theme($skin) { ... }Description
Defines the blocks component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The blocks component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
compounds-blocks
Since 1.0.0-dev.0$compounds-blocks: (
);Description
Defines the base skin of the blocks component.
Type
variable
placeholders
compounds-blocks
Since 1.0.0-dev.0%compounds-blocks { ... }Description
Defines the base structure of the blocks component.
cards
mixins
compounds-cards review
Since 1.0.0@mixin compounds-cards($custom) { ... }Description
Builds a constructor for the cards component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our cards component
Requires
-
placeholder
compounds-cards -
variable
compounds-cards -
mixin
compounds-cards--theme -
external
Brandy::map-extend
compounds-cards--theme
Since 1.0.0-dev.0@mixin compounds-cards--theme($skin) { ... }Description
Defines the cards component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The cards component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
compounds-cards
Since 1.0.0$compounds-cards: (
'gap': (
'x': 25px,
'y': 25px
),
'columns': (
's': 1,
'm': 2,
'l': 3,
'xl': 3
),
'spacing': 25px
);Description
Defines the base skin of the cards component.
Type
variable
placeholders
compounds-cards
Since 1.0.0%compounds-cards { ... }Description
Defines the base structure of the cards component.
feed
mixins
compounds-feed review
Since 1.0.0-dev.3@mixin compounds-feed($custom) { ... }Description
Builds a constructor for the feed component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our feed component
Requires
-
placeholder
compounds-feed -
variable
compounds-feed -
mixin
compounds-feed--theme -
external
Brandy::map-extend
compounds-feed--theme
Since 1.0.0-dev.3@mixin compounds-feed--theme($skin) { ... }Description
Defines the feed component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The feed component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
atoms-rule -
external
Brandy::map-deep-get
variables
compounds-feed
Since 1.0.0-dev.3$compounds-feed: (
'heading': color('blue', 'mid'),
'border': (
'thickness': $border-width-s,
'color': color('slate', 'light')
),
'padding': $rhythm-y
);Description
Defines the base skin of the feed component.
Type
variable
placeholders
compounds-feed
Since 1.0.0-dev.3%compounds-feed { ... }Description
Defines the base structure of the feed component.
Requires
-
variable
rhythm-y
grouping-files
mixins
compounds-grouping-files review
Since 1.0.0-dev.0@mixin compounds-grouping-files($custom) { ... }Description
Builds a constructor for the grouping-files component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our grouping-files component
Requires
-
placeholder
compounds-grouping-files -
variable
compounds-grouping-files -
mixin
compounds-grouping-files--theme -
external
Brandy::map-extend
compounds-grouping-files--theme
Since 1.0.0-dev.0@mixin compounds-grouping-files--theme($skin) { ... }Description
Defines the grouping-files component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The grouping-files component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
compounds-grouping-files
Since 1.0.0-dev.0$compounds-grouping-files: (
'color': color('blue','base'),
);Description
Defines the base skin of the grouping-files component.
Type
variable
placeholders
compounds-grouping-files
Since 1.0.0-dev.0%compounds-grouping-files { ... }Description
Defines the base structure of the grouping-files component.
nav-menu-main
nav-menu-utility
popular-links-menu
related
sidebar-list
mixins
compounds-sidebar-list review
Since 1.0.0-dev.0@mixin compounds-sidebar-list($custom) { ... }Description
Builds a constructor for the sidebar-list component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our sidebar-list component
Requires
-
placeholder
compounds-sidebar-list -
variable
compounds-sidebar-list -
mixin
compounds-sidebar-list--theme -
external
Brandy::map-extend
compounds-sidebar-list--theme
Since 1.0.0-dev.0@mixin compounds-sidebar-list--theme($skin) { ... }Description
Defines the sidebar-list component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The sidebar-list component's themeable properties
Requires
-
mixin
tokens-heading -
external
Brandy::map-deep-get
variables
compounds-sidebar-list
Since 1.0.0-dev.0$compounds-sidebar-list: (
'title': (
'color': color('blue'),
'icon': (
'size': 16px,
'spacing': 10px
)
),
'spacing': (
'title': 1rem,
'button': 25px
),
'padding': 35px,
'divider': map-deep-get($atoms-rule, 'styles.dotted.border')
);Description
Defines the base skin of the sidebar-list component.
Type
variable
placeholders
compounds-sidebar-list
Since 1.0.0-dev.0%compounds-sidebar-list { ... }Description
Defines the base structure of the sidebar-list component.
slider
variables
compounds-slider
Since 1.0.0-dev.0$compounds-slider: (
'max': 25,
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'indicator': (
'size': 11px,
'spacing': 10px,
'border': (
'thickness': $border-width-m,
'color': color('blue', 'bright')
),
'fill': color('blue', 'bright')
),
'button': (
'color': color('blue', 'bright'),
'size': 50px,
'offset': (
's': 93%,
'm': 90%,
'l': 80%
)
)
);Description
Defines the base skin of the slider component.
Type
variable
mixins
compounds-slider--theme
Since 1.0.0-dev.0@mixin compounds-slider--theme($skin) { ... }Description
Defines the slider component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The slider component's themeable properties
Requires
-
function
icon-url -
function
icon-url -
variable
transition-duration -
variable
transition-timing -
variable
molecules-slide -
variable
transition-duration -
variable
transition-timing -
variable
transition-duration -
variable
transition-timing -
external
Brandy::map-deep-get
compounds-slider review
Since 1.0.0-dev.0@mixin compounds-slider($custom) { ... }Description
Builds a constructor for the slider component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our slider component
Requires
-
placeholder
compounds-slider -
variable
compounds-slider -
mixin
compounds-slider--theme -
external
Brandy::map-extend
placeholders
compounds-slider
Since 1.0.0-dev.0%compounds-slider { ... }Description
Defines the base structure of the slider component.
subnav-menu-main
tab-menu
tiles
variables
compounds-tiles
Since 1.0.0-dev.0$compounds-tiles: (
'gap': (
'x': 25px,
'y': 25px
),
'columns': (
's': 1,
'm': 2,
'l': 3,
'xl': 3
),
'spacing': 25px
);Description
Defines the base skin of the tiles component.
Type
variable
mixins
compounds-tiles--theme
Since 1.0.0-dev.0@mixin compounds-tiles--theme($skin) { ... }Description
Defines the tiles component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The tiles component's themeable properties
Requires
-
external
Brandy::map-deep-get
compounds-tiles review
Since 1.0.0-dev.0@mixin compounds-tiles($custom) { ... }Description
Builds a constructor for the tiles component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our tiles component
Requires
-
placeholder
compounds-tiles -
variable
compounds-tiles -
mixin
compounds-tiles--theme -
external
Brandy::map-extend
placeholders
compounds-tiles
Since 1.0.0-dev.0%compounds-tiles { ... }Description
Defines the base structure of the tiles component.
utility-list
variables
compounds-utility-list
Since 1.0.0$compounds-utility-list: (
'icon': 25px,
'padding': 25px,
'spacing': 5px,
//'context': color('blue'),
'title': color('blue'),
'background': color('slate', 'light'),
'border': (
'offset': 25px,
'thickness': $border-width-s,
'color': tint(color('charcoal'), 80%)
)
);Description
Defines the base skin of the utility-list component.
Type
variable
mixins
compounds-utility-list--theme
Since 1.0.0@mixin compounds-utility-list--theme($skin) { ... }Description
Defines the utility-list component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The utility-list component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
molecules-utility-list-item -
external
Brandy::map-deep-get
compounds-utility-list review
Since 1.0.0@mixin compounds-utility-list($custom) { ... }Description
Builds a constructor for the utility-list component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our utility-list component
Requires
-
placeholder
compounds-utility-list -
variable
compounds-utility-list -
mixin
compounds-utility-list--theme -
external
Brandy::map-extend
placeholders
compounds-utility-list
Since 1.0.0%compounds-utility-list { ... }Description
Defines the base structure of the utility-list component.
Molecules
accordion
mixins
molecules-accordion review
Since 1.0.0@mixin molecules-accordion($custom) { ... }Description
Builds a constructor for the accordion component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our accordion component
Requires
-
placeholder
molecules-accordion -
variable
molecules-accordion -
mixin
molecules-accordion--theme -
external
Brandy::map-extend
molecules-accordion--theme
Since 1.0.0@mixin molecules-accordion--theme($skin) { ... }Description
Defines the accordion component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The accordion component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
external
Brandy::map-deep-get
variables
molecules-accordion
Since 1.0.0$molecules-accordion: (
'background': rgba(color('slate', 'light'), .5),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'size': 100px,
'indicator': (
'size': 25px,
'color': $color-actionable
),
'padding': 25px,
'title': color('blue', 'dark'),
'border': (
'thickness': $border-width-s,
'color': color('slate')
)
);Description
Defines the base skin of the accordion component.
Type
variable
placeholders
molecules-accordion
Since 1.0.0%molecules-accordion { ... }Description
Defines the base structure of the accordion component.
alert
mixins
molecules-alert review
Since 1.0.0@mixin molecules-alert($custom) { ... }Description
Builds a constructor for the alert component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our alert component
Requires
-
placeholder
molecules-alert -
variable
molecules-alert -
mixin
molecules-alert--theme -
external
Brandy::map-extend
molecules-alert--theme
Since 1.0.0@mixin molecules-alert--theme($skin) { ... }Description
Defines the alert component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The alert component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
variable
colors -
variable
colors -
variable
colors -
variable
colors -
variable
colors -
external
Brandy::map-deep-get
variables
molecules-alert
Since 1.0.0$molecules-alert: (
'themes': (
'default': (
'foreground': color('charcoal'),
'background': tint(color('charcoal'), 80%),
'border': rgba(tint(nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2), 25%), .3),
'dismiss': (
'normal': tint(nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2), 25%),
'hover': nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2),
'active': nth(color-stops(color('charcoal'), tint(color('charcoal'), 80%), 3), 2)
)
),
'info': (
'foreground': color('ui', 'info'),
'background': color('ui', 'info', 'light'),
'border': rgba(color('ui', 'info', 'bright'), .3),
'dismiss': (
'normal': color('ui', 'info', 'bright'),
'hover': color('ui', 'info', 'mid'),
'active': color('ui', 'info', 'mid')
)
),
'success': (
'foreground': color('ui', 'success'),
'background': color('ui', 'success', 'light'),
'border': rgba(color('ui', 'success', 'bright'), .3),
'dismiss': (
'normal': color('ui', 'success', 'bright'),
'hover': color('ui', 'success', 'mid'),
'active': color('ui', 'success', 'mid')
)
),
'caution': (
'foreground': color('ui', 'caution'),
'background': color('ui', 'caution', 'light'),
'border': rgba(color('ui', 'caution', 'bright'), .3),
'dismiss': (
'normal': color('ui', 'caution', 'bright'),
'hover': color('ui', 'caution', 'mid'),
'active': color('ui', 'caution', 'mid')
)
),
'error': (
'foreground': color('ui', 'error'),
'background': color('ui', 'error', 'light'),
'border': rgba(color('ui', 'error', 'bright'), .3),
'dismiss': (
'normal': color('ui', 'error', 'bright'),
'hover': color('ui', 'error', 'mid'),
'active': color('ui', 'error', 'mid')
)
),
'light': (
'foreground': color('charcoal'),
'background': color('white'),
'border': rgba(tint(mix(color('charcoal'), color('white'), 40%), 25%), .3),
'dismiss': (
'normal': tint(mix(color('charcoal'), color('white'), 40%), 25%),
'hover': mix(color('charcoal'), color('white'), 40%),
'active': mix(color('charcoal'), color('white'), 40%)
)
),
'dark': (
'foreground': color('white'),
'background': color('charcoal'),
'border': rgba(tint(mix(color('white'), color('charcoal'), 40%), 25%), .3),
'dismiss': (
'normal': tint(mix(color('white'), color('charcoal'), 40%), 25%),
'hover': mix(color('white'), color('charcoal'), 40%),
'active': mix(color('white'), color('charcoal'), 40%)
)
)
),
'theme': 'default',
'border': (
'thickness': $border-width-s,
'offset': 25px
),
'gap': 10px,
'padding': 25px,
'dismiss': (
'size': 25px,
'padding': 5px
),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
)
);Description
Defines the base skin of the alert component.
Type
variable
placeholders
molecules-alert
Since 1.0.0%molecules-alert { ... }Description
Defines the base structure of the alert component.
block
mixins
molecules-block review
Since 1.0.0@mixin molecules-block($custom) { ... }Description
Builds a constructor for the block component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our block component
Requires
-
placeholder
molecules-block -
variable
molecules-block -
mixin
molecules-block--theme -
external
Brandy::map-extend
molecules-block--theme
Since 1.0.0@mixin molecules-block--theme($skin) { ... }Description
Defines the block component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The block component's themeable properties
Requires
-
mixin
tokens-layout -
mixin
tokens-heading -
mixin
tokens-text -
external
Brandy::map-deep-get
variables
molecules-block
Since 1.0.0$molecules-block: (
'theme': 'dark',
'themes': (
'dark': (
'heading': color('gold'),
'foreground': $color-text-light,
'background': color('blue', 'dark'),
'shadow': color('black')
),
'light': (
'heading': color('blue', 'dark'),
'foreground': $color-text-dark,
'background': color('slate', 'light'),
'shadow': color('charcoal')
)
),
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': (
'outer': 100px,
'inner': 1em
),
'overhang': 25px,
'shadow': 50px
);Description
Defines the base skin of the block component.
Type
variable
placeholders
molecules-block
Since 1.0.0%molecules-block { ... }Description
Defines the base structure of the block component.
branding-footer
branding-header
mixins
molecules-branding-header review
Since 1.0.0-dev.0@mixin molecules-branding-header($custom) { ... }Description
Builds a constructor for the branding-header component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our branding-header component
Requires
-
placeholder
molecules-branding-header -
variable
molecules-branding-header -
mixin
molecules-branding-header--theme -
external
Brandy::map-extend
molecules-branding-header--theme
Since 1.0.0-dev.0@mixin molecules-branding-header--theme($skin) { ... }Description
Defines the branding-header component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The branding-header component's themeable properties
Requires
-
mixin
tokens-text -
mixin
tokens-heading -
mixin
tokens-text -
function
icon-url -
variable
transition-duration -
variable
transition-timing -
variable
transition-duration -
variable
transition-timing -
variable
transition-duration -
variable
transition-timing -
variable
transition-duration -
variable
transition-timing -
external
Brandy::map-deep-get
variables
molecules-branding-header
Since 1.0.0-dev.0$molecules-branding-header: (
'background': color('white'),
'organization': color('blue', 'dark'),
'division': color('blue', 'dark'),
'dropdown': (
'color': color('blue', 'bright'),
'spacing': 1em,
'icon': 15px
),
'badge': (
'color': color('blue', 'mid'),
'stroke': 10px,
'size': (
'min': 75px,
'max': 100px
)
),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
),
'gap': 5px,
'padding': (
'x': 30px,
'y': 20px
)
);Description
Defines the base skin of the branding-header component.
Type
variable
placeholders
molecules-branding-header
Since 1.0.0-dev.0%molecules-branding-header { ... }Description
Defines the base structure of the branding-header component.
breadcrumbs
mixins
molecules-breadcrumbs review
Since 1.0.0-dev.0@mixin molecules-breadcrumbs($custom) { ... }Description
Builds a constructor for the breadcrumbs component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our breadcrumbs component
Requires
-
placeholder
molecules-breadcrumbs -
variable
molecules-breadcrumbs -
mixin
molecules-breadcrumbs--theme -
external
Brandy::map-extend
molecules-breadcrumbs--theme
Since 1.0.0-dev.0@mixin molecules-breadcrumbs--theme($skin) { ... }Description
Defines the breadcrumbs component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The breadcrumbs component's themeable properties
Requires
-
mixin
atoms-link -
external
Brandy::map-deep-get
variables
molecules-breadcrumbs
Since 1.0.0-dev.0$molecules-breadcrumbs: (
'color': color('blue', 'bright')
);Description
Defines the base skin of the breadcrumbs component.
Type
variable
placeholders
molecules-breadcrumbs
Since 1.0.0-dev.0%molecules-breadcrumbs { ... }Description
Defines the base structure of the breadcrumbs component.
Requires
-
variable
rhythm-x
card-action
mixins
molecules-card-action review
Since 1.0.0@mixin molecules-card-action($custom) { ... }Description
Builds a constructor for the card-action component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-action component
Requires
-
placeholder
molecules-card-action -
variable
molecules-card-action -
mixin
molecules-card-action--theme -
external
Brandy::map-extend
molecules-card-action--theme
Since 1.0.0@mixin molecules-card-action--theme($skin) { ... }Description
Defines the card-action component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-action component's themeable properties
Requires
-
mixin
tokens-heading -
external
Brandy::map-deep-get
variables
molecules-card-action
Since 1.0.0$molecules-card-action: (
'padding': 25px,
'gap': 25px,
'size': 265px,
'image': 190px,
'color': color('blue'),
'bar': (
'thickness': $border-width-l,
'color': color('blue', 'bright')
),
'border': (
'thickness': $border-width-s,
'color': color('slate', 'light')
),
'shadow': 0px 3px 3px rgba(color('black'), .08)
);Description
Defines the base skin of the card-action component.
Type
variable
placeholders
molecules-card-action
Since 1.0.0%molecules-card-action { ... }Description
Defines the base structure of the card-action component.
card-button
mixins
molecules-card-button review
Since 1.0.0-dev.0@mixin molecules-card-button($custom) { ... }Description
Builds a constructor for the card-button component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-button component
Requires
-
placeholder
molecules-card-button -
variable
molecules-card-button -
mixin
molecules-card-button--theme -
external
Brandy::map-extend
molecules-card-button--theme
Since 1.0.0-dev.0@mixin molecules-card-button--theme($skin) { ... }Description
Defines the card-button component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-button component's themeable properties
Requires
-
mixin
atoms-button -
mixin
tokens-heading -
mixin
tokens-heading--color -
mixin
tokens-heading--color -
variable
tokens-heading -
variable
tokens-heading -
external
Brandy::map-deep-get
variables
molecules-card-button
Since 1.0.0-dev.0$molecules-card-button: (
'size': 125px,
'padding': 20px,
'background': (
'normal': color('blue', 'mid'),
'hover': color('blue'),
'active': color('blue')
),
'foreground': (
'normal': $color-text-light,
'hover': $color-text-light,
'active': $color-text-light
),
'border': (
'offset': 15px,
'thickness': $border-width-s,
'color': rgba(color('slate', 'light'), .3)
),
);Description
Defines the base skin of the card-button component.
Type
variable
placeholders
molecules-card-button
Since 1.0.0-dev.0%molecules-card-button { ... }Description
Defines the base structure of the card-button component.
card-contact
mixins
molecules-card-contact review
Since 1.0.0@mixin molecules-card-contact($custom) { ... }Description
Builds a constructor for the card-contact component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-contact component
Requires
-
placeholder
molecules-card-contact -
variable
molecules-card-contact -
mixin
molecules-card-contact--theme -
external
Brandy::map-extend
molecules-card-contact--theme
Since 1.0.0@mixin molecules-card-contact--theme($skin) { ... }Description
Defines the card-contact component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-contact component's themeable properties
Requires
-
mixin
tokens-text -
mixin
atoms-link -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
molecules-card-contact
Since 1.0.0$molecules-card-contact: (
'bar': (
'thickness': $border-width-m,
'color': $color-actionable
),
'stripe': tint(color('slate', 'light'), 50%),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'foreground': color('blue'),
'background': color('white'),
'radius': 5px,
'padding': 40px 25px 25px,
'gap': 5px,
'image': 60px,
'name': (
'normal': color('blue', 'dark'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'email': (
'normal': $color-actionable,
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
)
);Description
Defines the base skin of the card-contact component.
Type
variable
placeholders
molecules-card-contact
Since 1.0.0%molecules-card-contact { ... }Description
Defines the base structure of the card-contact component.
card-librarian
mixins
molecules-card-librarian review
Since 1.0.0@mixin molecules-card-librarian($custom) { ... }Description
Builds a constructor for the card-librarian component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-librarian component
Requires
-
placeholder
molecules-card-librarian -
variable
molecules-card-librarian -
mixin
molecules-card-librarian--theme -
external
Brandy::map-extend
molecules-card-librarian--theme
Since 1.0.0@mixin molecules-card-librarian--theme($skin) { ... }Description
Defines the card-librarian component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-librarian component's themeable properties
Requires
-
mixin
tokens-text -
mixin
atoms-link -
mixin
atoms-link -
mixin
atoms-link -
mixin
atoms-link -
mixin
tokens-text -
mixin
tokens-heading -
external
Brandy::map-deep-get
variables
molecules-card-librarian
Since 1.0.0$molecules-card-librarian: (
'color': color('blue'),
'context': color('blue', 'dark'),
'name': (
'normal': color('blue', 'dark'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'title': color('blue', 'dark'),
'contact': (
'normal': color('blue'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'subjects': (
'normal': color('blue'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'divider': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%),
'size': 100%
),
'bar': (
'thickness': $border-width-m,
'color': $color-actionable
),
'image': 60px,
'icon': (
'size': 18px,
'color': color('blue'),
'spacing': 10px
),
'padding': 25px,
'gap': (
'x': 50px,
'y': (15px, 10px)
)
);Description
Defines the base skin of the card-librarian component.
Type
variable
placeholders
molecules-card-librarian
Since 1.0.0%molecules-card-librarian { ... }Description
Defines the base structure of the card-librarian component.
card-library-aid
mixins
molecules-card-library-aid review
Since 1.0.0@mixin molecules-card-library-aid($custom) { ... }Description
Builds a constructor for the card-library-aid component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-library-aid component
Requires
-
placeholder
molecules-card-library-aid -
variable
molecules-card-library-aid -
mixin
molecules-card-library-aid--theme -
external
Brandy::map-extend
molecules-card-library-aid--theme
Since 1.0.0@mixin molecules-card-library-aid--theme($skin) { ... }Description
Defines the card-library-aid component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-library-aid component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
molecules-card-library-aid
Since 1.0.0$molecules-card-library-aid: (
'bar': (
'thickness': $border-width-m,
'color': $color-actionable
),
'stripe': tint(color('slate', 'light'), 50%),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'background': color('white'),
'radius': 5px,
'padding': 40px 25px 25px,
'gap': 5px,
'icon': (
'size': 60px,
'scale': 75%,
'background': color('blue', 'bright'),
'border': 4px solid color('white')
),
'title': (
'normal': color('blue'),
'hover': $color-actionable,
'active': $color-actionable
),
'context': color('blue')
);Description
Defines the base skin of the card-library-aid component.
Type
variable
placeholders
molecules-card-library-aid
Since 1.0.0%molecules-card-library-aid { ... }Description
Defines the base structure of the card-library-aid component.
card-library-guide
mixins
molecules-card-library-guide review
Since 1.0.0@mixin molecules-card-library-guide($custom) { ... }Description
Builds a constructor for the card-library-guide component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-library-guide component
Requires
-
placeholder
molecules-card-library-guide -
variable
molecules-card-library-guide -
mixin
molecules-card-library-guide--theme -
external
Brandy::map-extend
molecules-card-library-guide--theme
Since 1.0.0@mixin molecules-card-library-guide--theme($skin) { ... }Description
Defines the card-library-guide component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-library-guide component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
molecules-card-library-guide
Since 1.0.0$molecules-card-library-guide: (
'bar': (
'thickness': $border-width-l,
'color': color('blue', 'bright')
),
'border': (
'thickness': $border-width-s,
'color': color('slate', 'light')
),
'background': color('white'),
'shadow': 0px 3px 3px rgba(color('black'), .08),
'padding': 50px 25px,
'title': (
'normal': color('blue'),
'hover': $color-actionable,
'active': $color-actionable
)
);Description
Defines the base skin of the card-library-guide component.
Type
variable
placeholders
molecules-card-library-guide
Since 1.0.0%molecules-card-library-guide { ... }Description
Defines the base structure of the card-library-guide component.
card-listing
mixins
molecules-card-listing review
Since 1.0.0@mixin molecules-card-listing($custom) { ... }Description
Builds a constructor for the card-listing component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-listing component
Requires
-
placeholder
molecules-card-listing -
variable
molecules-card-listing -
mixin
molecules-card-listing--theme -
external
Brandy::map-extend
molecules-card-listing--theme
Since 1.0.0@mixin molecules-card-listing--theme($skin) { ... }Description
Defines the card-listing component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-listing component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
tokens-text -
variable
atoms-link -
variable
atoms-button -
variable
atoms-button -
variable
atoms-button -
variable
atoms-button -
variable
atoms-button -
external
Brandy::map-deep-get
variables
molecules-card-listing
Since 1.0.0$molecules-card-listing: (
'theme': 'light',
'themes': (
'light': (
'background': tint(color('slate', 'light'), 50%),
'date': color('blue'),
'title': color('blue', 'dark'),
'description': $color-text-dark
),
'dark': (
'background': color('white'),
'context': color('blue'),
'title': color('blue', 'dark'),
'description': $color-text-dark
)
),
'padding': 50px 25px 25px,
'gap': (
'x': 25px,
'y': 5px
),
'size': 375px,
'border': (
'offset': 15px,
'thickness': $border-width-s,
'color': rgba(color('charcoal'), .2)
),
'image': (
'width': (50%, 55%),
'height': 375px
)
);Description
Defines the base skin of the card-listing component.
Type
variable
placeholders
molecules-card-listing
Since 1.0.0%molecules-card-listing { ... }Description
Defines the base structure of the card-listing component.
card-multimedia
mixins
molecules-card-multimedia review
Since 1.0.0@mixin molecules-card-multimedia($custom) { ... }Description
Builds a constructor for the card-multimedia component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-multimedia component
Requires
-
placeholder
molecules-card-multimedia -
variable
molecules-card-multimedia -
mixin
molecules-card-multimedia--theme -
external
Brandy::map-extend
molecules-card-multimedia--theme
Since 1.0.0@mixin molecules-card-multimedia--theme($skin) { ... }Description
Defines the card-multimedia component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-multimedia component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-link -
mixin
tokens-heading -
external
Brandy::map-deep-get
variables
molecules-card-multimedia
Since 1.0.0$molecules-card-multimedia: (
'bar': (
'thickness': $border-width-m,
'color': $color-actionable
),
'stripe': tint(color('slate', 'light'), 50%),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'background': color('white'),
'radius': 5px,
'padding': 40px 25px 80px,
'spacing': 25px,
'gap': 15px,
'icon': (
'size': 60px,
'scale': 75%,
'background': color('blue', 'bright'),
'border': 4px solid color('white')
),
'title': (
'normal': color('blue'),
'hover': $color-actionable,
'active': $color-actionable
),
'context': color('blue'),
'duration': $color-text-dark
);Description
Defines the base skin of the card-multimedia component.
Type
variable
placeholders
molecules-card-multimedia
Since 1.0.0%molecules-card-multimedia { ... }Description
Defines the base structure of the card-multimedia component.
card-staff
mixins
molecules-card-staff review
Since 1.0.0-dev.0@mixin molecules-card-staff($custom) { ... }Description
Builds a constructor for the card-staff component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our card-staff component
Requires
-
placeholder
molecules-card-staff -
variable
molecules-card-staff -
mixin
molecules-card-staff--theme -
external
Brandy::map-extend
molecules-card-staff--theme
Since 1.0.0-dev.0@mixin molecules-card-staff--theme($skin) { ... }Description
Defines the card-staff component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The card-staff component's themeable properties
Requires
-
mixin
tokens-text -
mixin
atoms-link -
mixin
atoms-link -
mixin
atoms-link -
mixin
tokens-text -
mixin
tokens-heading -
external
Brandy::map-deep-get
variables
molecules-card-staff
Since 1.0.0-dev.0$molecules-card-staff: (
'color': color('blue'),
'context': color('blue', 'dark'),
'name': (
'normal': color('blue', 'dark'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'title': color('blue', 'dark'),
'contact': (
'normal': color('blue'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'divider': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%),
'size': 100%
),
'bar': (
'thickness': $border-width-m,
'color': $color-actionable
),
'image': 60px,
'icon': (
'size': 18px,
'color': color('blue'),
'spacing': 10px
),
'padding': 25px,
'gap': (
'x': 50px,
'y': (15px, 10px)
)
);Description
Defines the base skin of the card-staff component.
Type
variable
placeholders
molecules-card-staff
Since 1.0.0-dev.0%molecules-card-staff { ... }Description
Defines the base structure of the card-staff component.
explorer
mixins
molecules-explorer review
Since 1.0.0@mixin molecules-explorer($custom) { ... }Description
Builds a constructor for the explorer component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our explorer component
Requires
-
placeholder
molecules-explorer -
variable
molecules-explorer -
mixin
molecules-explorer--theme -
external
Brandy::map-extend
molecules-explorer--theme
Since 1.0.0@mixin molecules-explorer--theme($skin) { ... }Description
Defines the explorer component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The explorer component's themeable properties
Requires
-
mixin
tokens-text -
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
molecules-explorer
Since 1.0.0$molecules-explorer: (
'background': color('blue', 'mid'),
'heading': $color-text-light,
'context': color('gold'),
'padding': 30px,
'gap': 10px,
'border': (
'color': rgba(color('slate', 'light'), .3),
'offset': 15px,
'thickness': $border-width-s
),
'link': (
'normal': color('slate', 'light'),
'hover': $color-text-light,
'active': $color-text-light
)
);Description
Defines the base skin of the explorer component.
Type
variable
placeholders
molecules-explorer
Since 1.0.0%molecules-explorer { ... }Description
Defines the base structure of the explorer component.
feature
mixins
molecules-feature review
Since 1.0.0@mixin molecules-feature($custom) { ... }Description
Builds a constructor for the feature component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our feature component
Requires
-
placeholder
molecules-feature -
variable
molecules-feature -
mixin
molecules-feature--theme -
external
Brandy::map-extend
molecules-feature--theme
Since 1.0.0@mixin molecules-feature--theme($skin) { ... }Description
Defines the feature component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The feature component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
tokens-text -
variable
colors -
variable
colors -
variable
colors -
variable
colors -
variable
colors -
external
Brandy::map-deep-get
variables
molecules-feature
Since 1.0.0$molecules-feature: (
'theme': 'light',
'themes': (
'light': (
'background': tint(color('slate', 'light'), 50%),
'context': $color-text-dark,
'heading': color('blue', 'mid'),
'description': $color-text-dark
),
'dark': (
'background': color('white'),
'context': tint($color-text-dark, 50%),
'heading': color('blue', 'mid'),
'description': $color-text-dark
)
),
'padding': 25px,
'gap': (
'x': 25px,
'y': 5px
),
'size': 400px,
'border': (
'offset': 15px,
'thickness': $border-width-s,
'color': rgba(color('charcoal'), .2)
),
'spacing': (
'description': 10px,
'action': 20px
),
'image': 275px
);Description
Defines the base skin of the feature component.
Type
variable
placeholders
molecules-feature
Since 1.0.0%molecules-feature { ... }Description
Defines the base structure of the feature component.
feed-item
mixins
molecules-feed-item review
Since 1.0.0@mixin molecules-feed-item($custom) { ... }Description
Builds a constructor for the feed-item component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our feed-item component
Requires
-
placeholder
molecules-feed-item -
variable
molecules-feed-item -
mixin
molecules-feed-item--theme -
external
Brandy::map-extend
molecules-feed-item--theme
Since 1.0.0@mixin molecules-feed-item--theme($skin) { ... }Description
Defines the feed-item component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The feed-item component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
atoms-link -
mixin
tokens-text -
mixin
atoms-button -
external
Brandy::map-deep-get
variables
molecules-feed-item
Since 1.0.0$molecules-feed-item: (
'title': (
'normal': $color-text-dark,
'hover': $color-actionable,
'active': $color-actionable
),
'date': color('blue'),
'gap': 5px
);Description
Defines the base skin of the feed-item component.
Type
variable
placeholders
molecules-feed-item
Since 1.0.0%molecules-feed-item { ... }Description
Defines the base structure of the feed-item component.
figure
mixins
molecules-figure review
Since 1.0.0@mixin molecules-figure($custom) { ... }Description
Builds a constructor for the figure component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our figure component
Requires
-
placeholder
molecules-figure -
variable
molecules-figure -
mixin
molecules-figure--theme -
external
Brandy::map-extend
molecules-figure--theme
Since 1.0.0@mixin molecules-figure--theme($skin) { ... }Description
Defines the figure component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The figure component's themeable properties
Requires
-
mixin
tokens-text -
external
Brandy::map-deep-get
variables
molecules-figure
Since 1.0.0$molecules-figure: (
'padding': 25px,
'margin': $rhythm-y,
'border': (
'thickness': $border-width-s,
'color': tint(color('blue', 'dark'), 90%)
)
);Description
Defines the base skin of the figure component.
Type
variable
placeholders
molecules-figure
Since 1.0.0%molecules-figure { ... }Description
Defines the base structure of the figure component.
flyout-feed-item
mixins
molecules-flyout-feed-item review
Since 1.0.0@mixin molecules-flyout-feed-item($custom) { ... }Description
Builds a constructor for the flyout-feed-item component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our flyout-feed-item component
Requires
-
placeholder
molecules-flyout-feed-item -
variable
molecules-flyout-feed-item -
mixin
molecules-flyout-feed-item--theme -
external
Brandy::map-extend
molecules-flyout-feed-item--theme
Since 1.0.0@mixin molecules-flyout-feed-item--theme($skin) { ... }Description
Defines the flyout-feed-item component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The flyout-feed-item component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
mixin
tokens-text -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
molecules-flyout-feed-item
Since 1.0.0$molecules-flyout-feed-item: (
'gap': (
'x': 25px,
'y': 5px
),
'thumbnail': (
'width': (
's': 100px,
'm': 150px,
'l': 175px
),
'aspect': .83
),
'padding': 25px,
'background': (
's': color('blue', 'dark'),
'm': color('white'),
'l': color('white')
),
'foreground': (
'heading': (
's': $color-text-light,
'm': color('blue', 'dark'),
'l': color('blue', 'dark')
),
'date': (
's': $color-text-light,
'm': color('blue'),
'l': color('blue')
),
'description': (
's': $color-text-light,
'm': $color-text-dark,
'l': $color-text-dark
)
),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
)
);Description
Defines the base skin of the flyout-feed-item component.
Type
variable
placeholders
molecules-flyout-feed-item
Since 1.0.0%molecules-flyout-feed-item { ... }Description
Defines the base structure of the flyout-feed-item component.
flyout-info-item
mixins
molecules-flyout-info-item review
Since 1.0.0@mixin molecules-flyout-info-item($custom) { ... }Description
Builds a constructor for the flyout-info-item component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our flyout-info-item component
Requires
-
placeholder
molecules-flyout-info-item -
variable
molecules-flyout-info-item -
mixin
molecules-flyout-info-item--theme -
external
Brandy::map-extend
molecules-flyout-info-item--theme
Since 1.0.0@mixin molecules-flyout-info-item--theme($skin) { ... }Description
Defines the flyout-info-item component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The flyout-info-item component's themeable properties
Requires
-
mixin
tokens-text -
external
Brandy::map-deep-get
variables
molecules-flyout-info-item
Since 1.0.0$molecules-flyout-info-item: (
'background': (
's': color('blue', 'dark'),
'm': color('white'),
'l': color('white')
),
'data': (
'color': (
'normal': (
's': $color-text-light,
'm': color('blue'),
'l': color('blue')
),
'faded': (
's': color('slate'),
'm': color('slate'),
'l': color('slate')
)
)
),
'label': (
'color': (
's': color('blue', 'light'),
'm': $color-text-dark,
'l': $color-text-dark
)
),
'spacing': 25px
);Description
Defines the base skin of the flyout-info-item component.
Type
variable
placeholders
molecules-flyout-info-item
Since 1.0.0%molecules-flyout-info-item { ... }Description
Defines the base structure of the flyout-info-item component.
notification
mixins
molecules-notification review
Since 1.0.0@mixin molecules-notification($custom) { ... }Description
Builds a constructor for the notification component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our notification component
Requires
-
placeholder
molecules-notification -
variable
molecules-notification -
mixin
molecules-notification--theme -
external
Brandy::map-extend
molecules-notification--theme
Since 1.0.0@mixin molecules-notification--theme($skin) { ... }Description
Defines the notification component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The notification component's themeable properties
Requires
-
mixin
tokens-text -
mixin
tokens-text -
variable
colors -
variable
colors -
variable
colors -
variable
colors -
variable
colors -
external
Brandy::map-deep-get
variables
molecules-notification
Since 1.0.0$molecules-notification: (
'themes': (
'default': (
'foreground': color('charcoal'),
'background': color('slate', 'light'),
'label': color('blue'),
'dismiss': (
'normal': color('blue'),
'hover': color('blue', 'dark'),
'active': color('blue', 'dark')
)
),
'info': (
'foreground': color('white'),
'background': color('ui', 'info'),
'label': color('ui', 'caution', 'bright'),
'dismiss': (
'normal': color('ui', 'caution', 'bright'),
'hover': color('ui', 'caution', 'mid'),
'active': color('ui', 'caution', 'mid')
)
),
'success': (
'foreground': color('blue', 'dark'),
'background': color('ui', 'success', 'mid'),
'label': color('blue'),
'dismiss': (
'normal': color('blue'),
'hover': color('blue', 'dark'),
'active': color('blue', 'dark')
)
),
'caution': (
'foreground': color('blue', 'dark'),
'background': color('ui', 'caution', 'bright'),
'label': color('blue'),
'dismiss': (
'normal': color('blue'),
'hover': color('blue', 'dark'),
'active': color('blue', 'dark')
)
),
'error': (
'foreground': color('white'),
'background': color('ui', 'error'),
'label': color('slate', 'light'),
'dismiss': (
'normal': color('slate', 'light'),
'hover': color('slate'),
'active': color('slate')
)
),
'light': (
'foreground': color('charcoal'),
'background': color('white'),
'label': $color-actionable,
'dismiss': (
'normal': $color-actionable,
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
)
),
'dark': (
'foreground': color('white'),
'background': color('blue', 'dark'),
'label': color('ui', 'caution', 'bright'),
'dismiss': (
'normal': color('ui', 'caution', 'bright'),
'hover': color('ui', 'caution', 'mid'),
'active': color('ui', 'caution', 'mid')
)
)
),
'theme': 'default',
'padding': 15px 25px,
'gap': 25px,
'dismiss': 25px,
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
)
);Description
Defines the base skin of the notification component.
Type
variable
placeholders
molecules-notification
Since 1.0.0%molecules-notification { ... }Description
Defines the base structure of the notification component.
sidebar-list-item
mixins
molecules-sidebar-list-item review
Since 1.0.0@mixin molecules-sidebar-list-item($custom) { ... }Description
Builds a constructor for the sidebar-list-item component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our sidebar-list-item component
Requires
-
placeholder
molecules-sidebar-list-item -
variable
molecules-sidebar-list-item -
mixin
molecules-sidebar-list-item--theme -
external
Brandy::map-extend
molecules-sidebar-list-item--theme
Since 1.0.0@mixin molecules-sidebar-list-item--theme($skin) { ... }Description
Defines the sidebar-list-item component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The sidebar-list-item component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
external
Brandy::map-deep-get
variables
molecules-sidebar-list-item
Since 1.0.0$molecules-sidebar-list-item: (
'context': color('blue'),
'margin': 25px,
'icon': (
'size': 20px,
'spacing': 15px
)
);Description
Defines the base skin of the sidebar-list-item component.
Type
variable
placeholders
molecules-sidebar-list-item
Since 1.0.0%molecules-sidebar-list-item { ... }Description
Defines the base structure of the sidebar-list-item component.
slide
variables
molecules-slide
Since 1.0.0$molecules-slide: (
'background': color('blue', 'mid'),
'foreground': $color-text-light,
'context': color('gold'),
'button': (
'background': (
'normal': color('white'),
'hover': color('gold'),
'active': color('gold'),
'hollow': tint(color('blue', 'mid'), 25%),
),
'foreground': (
'normal': color('blue', 'mid'),
'hover': color('blue'),
'active': color('blue'),
'hollow': $color-text-light
),
),
'image': (
'max': 200px,
'min': 125px
),
'gap': (
'x': 25px,
'y': 10px
),
'padding': 40px,
'width': (
's': 93%,
'm': 90%,
'l': 80%
)
);Description
Defines the base skin of the slide component.
Type
variable
mixins
molecules-slide--theme
Since 1.0.0@mixin molecules-slide--theme($skin) { ... }Description
Defines the slide component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The slide component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-button -
variable
screens -
variable
screens -
external
Brandy::map-deep-get
molecules-slide review
Since 1.0.0@mixin molecules-slide($custom) { ... }Description
Builds a constructor for the slide component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our slide component
Requires
-
placeholder
molecules-slide -
variable
molecules-slide -
mixin
molecules-slide--theme -
external
Brandy::map-extend
placeholders
molecules-slide
Since 1.0.0%molecules-slide { ... }Description
Defines the base structure of the slide component.
social-media
variables
molecules-social-media
Since 1.0.0-dev.3$molecules-social-media: (
'background': color('blue', 'dark'),
'color': (
'normal': color('gold'),
'hover': color('blue', 'bright'),
'active': color('blue', 'bright')
),
'size': 75px
);Description
Defines the base skin of the social-media component.
Type
variable
mixins
molecules-social-media--theme
Since 1.0.0-dev.3@mixin molecules-social-media--theme($skin) { ... }Description
Defines the social-media component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The social-media component's themeable properties
Requires
-
mixin
atoms-button -
external
Brandy::map-deep-get
molecules-social-media review
Since 1.0.0-dev.3@mixin molecules-social-media($custom) { ... }Description
Builds a constructor for the social-media component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our social-media component
Requires
-
placeholder
molecules-social-media -
variable
molecules-social-media -
mixin
molecules-social-media--theme -
external
Brandy::map-extend
placeholders
molecules-social-media
Since 1.0.0-dev.3%molecules-social-media { ... }Description
Defines the base structure of the social-media component.
tile-listing
variables
molecules-tile-listing
Since 1.0.0$molecules-tile-listing: (
'padding': 40px 25px,
'gap': 10px,
'image': 55%,
'date': color('blue'),
'description': $color-text-dark,
'title': (
'normal': color('blue'),
'hover': $color-actionable,
'active': $color-actionable
),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'radius': 5px
);Description
Defines the base skin of the tile-listing component.
Type
variable
mixins
molecules-tile-listing--theme
Since 1.0.0@mixin molecules-tile-listing--theme($skin) { ... }Description
Defines the tile-listing component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The tile-listing component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-link -
mixin
tokens-text -
mixin
atoms-link -
mixin
tokens-text -
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
molecules-tile-listing review
Since 1.0.0@mixin molecules-tile-listing($custom) { ... }Description
Builds a constructor for the tile-listing component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our tile-listing component
Requires
-
placeholder
molecules-tile-listing -
variable
molecules-tile-listing -
mixin
molecules-tile-listing--theme -
external
Brandy::map-extend
placeholders
molecules-tile-listing
Since 1.0.0%molecules-tile-listing { ... }Description
Defines the base structure of the tile-listing component.
tile-utility
variables
molecules-tile-utility
Since 1.0.0$molecules-tile-utility: (
'padding': 25px,
'gap': 10px,
'image': 55%,
'description': $color-text-dark,
'title': (
'normal': color('blue'),
'hover': $color-actionable,
'active': $color-actionable
),
'border': (
'thickness': $border-width-s,
'color': tint(color('slate'), 50%)
),
'radius': 5px
);Description
Defines the base skin of the tile-utility component.
Type
variable
mixins
molecules-tile-utility--theme
Since 1.0.0@mixin molecules-tile-utility--theme($skin) { ... }Description
Defines the tile-utility component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The tile-utility component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
atoms-link -
mixin
tokens-text -
external
Brandy::map-deep-get
molecules-tile-utility review
Since 1.0.0@mixin molecules-tile-utility($custom) { ... }Description
Builds a constructor for the tile-utility component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our tile-utility component
Requires
-
placeholder
molecules-tile-utility -
variable
molecules-tile-utility -
mixin
molecules-tile-utility--theme -
external
Brandy::map-extend
placeholders
molecules-tile-utility
Since 1.0.0%molecules-tile-utility { ... }Description
Defines the base structure of the tile-utility component.
utility-list-item
variables
molecules-utility-list-item
Since 1.0.0$molecules-utility-list-item: (
'padding': 25px,
'gap': 10px,
'image': 40%,
'divider': (
'thickness': $border-width-s,
'color': rgba(color('slate'), .5)
),
'context': color('blue')
);Description
Defines the base skin of the utility-list-item component.
Type
variable
mixins
molecules-utility-list-item--theme
Since 1.0.0@mixin molecules-utility-list-item--theme($skin) { ... }Description
Defines the utility-list-item component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The utility-list-item component's themeable properties
Requires
-
mixin
tokens-heading -
external
Brandy::map-deep-get
molecules-utility-list-item review
Since 1.0.0@mixin molecules-utility-list-item($custom) { ... }Description
Builds a constructor for the utility-list-item component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our utility-list-item component
Requires
-
placeholder
molecules-utility-list-item -
variable
molecules-utility-list-item -
mixin
molecules-utility-list-item--theme -
external
Brandy::map-extend
placeholders
molecules-utility-list-item
Since 1.0.0%molecules-utility-list-item { ... }Description
Defines the base structure of the utility-list-item component.
wayfinder
variables
molecules-wayfinder
Since 1.0.0$molecules-wayfinder: (
'background': color('blue', 'dark'),
'foreground': color('slate', 'light'),
'heading': color('gold'),
'size': 350px,
'image': 60%,
'overlap': 35%,
'padding': 25px,
'gap': 5px,
'spacing': (
'text': 15px
),
'border': (
'offset': 15px,
'thickness': $border-width-s,
'color': rgba(color('charcoal'), .2)
),
);Description
Defines the base skin of the wayfinder component.
Type
variable
mixins
molecules-wayfinder--theme
Since 1.0.0@mixin molecules-wayfinder--theme($skin) { ... }Description
Defines the wayfinder component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The wayfinder component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
external
Brandy::map-deep-get
molecules-wayfinder review
Since 1.0.0@mixin molecules-wayfinder($custom) { ... }Description
Builds a constructor for the wayfinder component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our wayfinder component
Requires
-
placeholder
molecules-wayfinder -
variable
molecules-wayfinder -
mixin
molecules-wayfinder--theme -
external
Brandy::map-extend
placeholders
molecules-wayfinder
Since 1.0.0%molecules-wayfinder { ... }Description
Defines the base structure of the wayfinder component.
Organisms
flow-content-boxes
mixins
organisms-flow-content-boxes review
Since 1.0.0-dev.0@mixin organisms-flow-content-boxes($custom) { ... }Description
Builds a constructor for the flow-content-boxes component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our flow-content-boxes component
Requires
-
placeholder
organisms-flow-content-boxes -
variable
organisms-flow-content-boxes -
mixin
organisms-flow-content-boxes--theme -
external
Brandy::map-extend
organisms-flow-content-boxes--theme
Since 1.0.0-dev.0@mixin organisms-flow-content-boxes--theme($skin) { ... }Description
Defines the flow-content-boxes component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The flow-content-explorer component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
organisms-flow-content-boxes
Since 1.0.0-dev.0$organisms-flow-content-boxes: (
'gap': $rhythm-y
);Description
Defines the base skin of the flow-content-boxes component.
Type
variable
placeholders
organisms-flow-content-boxes
Since 1.0.0-dev.0%organisms-flow-content-boxes { ... }Description
Defines the base structure of the flow-content-boxes component.
flow-feed-preview
mixins
organisms-flow-feed-preview review
Since 1.0.0-dev.3@mixin organisms-flow-feed-preview($custom) { ... }Description
Builds a constructor for the flow-feed-preview component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our flow-feed-preview component
Requires
-
placeholder
organisms-flow-feed-preview -
variable
organisms-flow-feed-preview -
mixin
organisms-flow-feed-preview--theme -
external
Brandy::map-extend
organisms-flow-feed-preview--theme
Since 1.0.0-dev.3@mixin organisms-flow-feed-preview--theme($skin) { ... }Description
Defines the flow-feed-preview component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The flow-feed-preview component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
organisms-flow-feed-preview
Since 1.0.0-dev.3$organisms-flow-feed-preview: (
'spacing': (
'x': 80px,
'y': 40px
)
);Description
Defines the base skin of the flow-feed-preview component.
Type
variable
placeholders
organisms-flow-feed-preview
Since 1.0.0-dev.3%organisms-flow-feed-preview { ... }Description
Defines the base structure of the flow-feed-preview component.
intro
mixins
organisms-intro review
Since 1.0.0@mixin organisms-intro($custom) { ... }Description
Builds a constructor for the intro component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our intro component
Requires
-
placeholder
organisms-intro -
variable
organisms-intro -
mixin
organisms-intro--theme -
external
Brandy::map-extend
organisms-intro--theme
Since 1.0.0@mixin organisms-intro--theme($skin) { ... }Description
Defines the intro component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The intro component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-rule -
mixin
atoms-rule -
mixin
tokens-heading -
mixin
atoms-rule -
mixin
atoms-rule -
mixin
tokens-heading -
mixin
tokens-text -
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
organisms-intro
Since 1.0.0$organisms-intro: (
'context': color('blue'),
'title': color('blue', 'dark'),
'subtitle': color('blue', 'mid'),
'thumb': (
'size': 150px,
'spacing': 35px
)
);Description
Defines the base skin of the intro component.
Type
variable
placeholders
organisms-intro
Since 1.0.0%organisms-intro { ... }Description
Defines the base structure of the intro component.
intro-hero
mixins
organisms-intro-hero review
Since 1.0.0-dev.0@mixin organisms-intro-hero($custom) { ... }Description
Builds a constructor for the intro-hero component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our intro-hero component
Requires
-
placeholder
organisms-intro-hero -
variable
organisms-intro-hero -
mixin
organisms-intro-hero--theme -
external
Brandy::map-extend
organisms-intro-hero--theme
Since 1.0.0-dev.0@mixin organisms-intro-hero--theme($skin) { ... }Description
Defines the intro-hero component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The intro-hero component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
external
Brandy::map-deep-get
variables
organisms-intro-hero
Since 1.0.0-dev.0$organisms-intro-hero: (
'gradient': #282828,
'color': color('white'),
'subtitle': (
'size': 16px
)
);Description
Defines the base skin of the intro-hero component.
Type
variable
placeholders
organisms-intro-hero
Since 1.0.0-dev.0%organisms-intro-hero { ... }Description
Defines the base structure of the intro-hero component.
intro-home
mixins
organisms-intro-home review
Since 1.0.0-dev.0@mixin organisms-intro-home($custom) { ... }Description
Builds a constructor for the intro-home component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our intro-home component
Requires
-
placeholder
organisms-intro-home -
variable
organisms-intro-home -
mixin
organisms-intro-home--theme -
external
Brandy::map-extend
organisms-intro-home--theme
Since 1.0.0-dev.0@mixin organisms-intro-home--theme($skin) { ... }Description
Defines the intro-home component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The intro-home component's themeable properties
Requires
-
mixin
tokens-heading -
variable
transition-duration -
variable
transition-timing -
variable
transition-duration -
variable
transition-timing -
external
Brandy::map-deep-get
variables
organisms-intro-home
Since 1.0.0-dev.0$organisms-intro-home: (
'gradient': color('blue','dark'),
'search': (
'background': color('blue','dark'),
'opacity': .9,
'border': (
'color': rgba(231, 234, 241, .2),
'thickness': $border-width-s
),
'color': (
'normal': color('slate', 'light'),
'active': color('gold')
),
'option': color('slate','light'),
'active': color('gold')
),
'hero': color('white'),
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
)
);Description
Defines the base skin of the intro-home component.
Type
variable
placeholders
organisms-intro-home
Since 1.0.0-dev.0%organisms-intro-home { ... }Description
Defines the base structure of the intro-home component.
intro-interior-cover
mixins
organisms-intro-interior-cover review
Since 1.0.0-dev.0@mixin organisms-intro-interior-cover($custom) { ... }Description
Builds a constructor for the intro-interior-cover component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our intro-interior-cover component
Requires
-
placeholder
organisms-intro-interior-cover -
variable
organisms-intro-interior-cover -
mixin
organisms-intro-interior-cover--theme -
external
Brandy::map-extend
organisms-intro-interior-cover--theme
Since 1.0.0-dev.0@mixin organisms-intro-interior-cover--theme($skin) { ... }Description
Defines the intro-interior-cover component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The intro-interior-cover component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-heading -
mixin
tokens-heading -
external
Brandy::map-deep-get
variables
organisms-intro-interior-cover
Since 1.0.0-dev.0$organisms-intro-interior-cover: (
'heading': color('blue','dark'),
'subheading': color('blue','dark'),
'image': 540px
);Description
Defines the base skin of the intro-interior-cover component.
Type
variable
placeholders
organisms-intro-interior-cover
Since 1.0.0-dev.0%organisms-intro-interior-cover { ... }Description
Defines the base structure of the intro-interior-cover component.
Requires
-
variable
rhythm-y
nav-bar-main
search-menu
section-deep-dive
mixins
organisms-section-deep-dive review
Since 1.0.0-dev.0@mixin organisms-section-deep-dive($custom) { ... }Description
Builds a constructor for the section-deep-dive component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our section-deep-dive component
Requires
-
placeholder
organisms-section-deep-dive -
variable
organisms-section-deep-dive -
mixin
organisms-section-deep-dive--theme -
external
Brandy::map-extend
organisms-section-deep-dive--theme
Since 1.0.0-dev.0@mixin organisms-section-deep-dive--theme($skin) { ... }Description
Defines the section-deep-dive component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The section-deep-dive component's themeable properties
Requires
-
mixin
tokens-layout -
mixin
tokens-heading -
mixin
atoms-rule -
mixin
tokens-text -
mixin
atoms-link -
mixin
tokens-heading -
mixin
atoms-rule -
variable
tokens-heading -
external
Brandy::map-deep-get
variables
organisms-section-deep-dive
Since 1.0.0-dev.0$organisms-section-deep-dive: (
'title': $color-text-light,
'headings': color('gold'),
'foreground': $color-text-light,
'background': color('blue', 'base'),
'link': (
'normal': $color-text-light,
'hover': $color-text-light,
'active': $color-text-light
),
'layout': (
'x': $layout-x,
'y': $layout-y
)
);Description
Defines the base skin of the section-deep-dive component.
Type
variable
placeholders
organisms-section-deep-dive
Since 1.0.0-dev.0%organisms-section-deep-dive { ... }Description
Defines the base structure of the section-deep-dive component.
Requires
-
variable
rhythm-y
section-main
mixins
organisms-section-main review
Since 1.0.0@mixin organisms-section-main($custom) { ... }Description
Builds a constructor for the section-main component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our main component
Requires
-
placeholder
organisms-section-main -
variable
organisms-section-main -
mixin
organisms-section-main--theme -
external
Brandy::map-extend
organisms-section-main--theme
Since 1.0.0@mixin organisms-section-main--theme($skin) { ... }Description
Defines the section-main component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The main component's themeable properties
Requires
-
mixin
atoms-link -
mixin
tokens-heading -
mixin
atoms-link -
external
Brandy::map-deep-get
variables
organisms-section-main
Since 1.0.0$organisms-section-main: (
'gap': 40px,
'theme': 'light',
'themes': (
'light': (
'foreground': $color-text-dark,
'background': color('white'),
'heading': color('blue'),
'link': (
'normal': color('blue', 'bright'),
'hover': color('blue', 'mid'),
'active': color('blue', 'mid')
)
),
'dark': (
'foreground': $color-text-light,
'background': color('blue', 'dark'),
'heading': $color-text-light,
'link': (
'normal': color('blue', 'bright'),
'hover': color('gold'),
'active': color('gold')
)
)
)
);Description
Defines the base skin of the section-main component.
Type
variable
placeholders
organisms-section-main
Since 1.0.0%organisms-section-main { ... }Description
Defines the base structure of the section-main component.
Requires
-
function
selector-excludes -
function
selector-excludes -
variable
rhythm-y -
variable
fonts-scale -
variable
rhythm-y -
variable
rhythm-y
section-major
mixins
organisms-section-major review
Since 1.0.0-dev.0@mixin organisms-section-major($custom) { ... }Description
Builds a constructor for the section-major component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our section-major component
Requires
-
placeholder
organisms-section-major -
variable
organisms-section-major -
mixin
organisms-section-major--theme -
external
Brandy::map-extend
organisms-section-major--theme
Since 1.0.0-dev.0@mixin organisms-section-major--theme($skin) { ... }Description
Defines the section-major component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The section-major component's themeable properties
Requires
-
mixin
tokens-layout -
mixin
tokens-heading -
mixin
atoms-rule -
mixin
tokens-text -
variable
tokens-heading -
external
Brandy::map-deep-get
variables
organisms-section-major
Since 1.0.0-dev.0$organisms-section-major: (
'theme': 'light',
'themes': (
'light': (
'heading': $color-text-dark,
'foreground': $color-text-dark,
'background': color('white')
),
'dark': (
'heading': $color-text-light,
'foreground': $color-text-light,
'background': color('blue', 'dark')
)
),
'layout': (
'x': $layout-x,
'y': $layout-y
)
);Description
Defines the base skin of the section-major component.
Type
variable
placeholders
organisms-section-major
Since 1.0.0-dev.0%organisms-section-major { ... }Description
Defines the base structure of the section-major component.
Requires
-
variable
rhythm-y
section-minor
mixins
organisms-section-minor review
Since 1.0.0-dev.0@mixin organisms-section-minor($custom) { ... }Description
Builds a constructor for the section-minor component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our section-minor component
Requires
-
placeholder
organisms-section-minor -
variable
organisms-section-minor -
mixin
organisms-section-minor--theme -
external
Brandy::map-extend
organisms-section-minor--theme
Since 1.0.0-dev.0@mixin organisms-section-minor--theme($skin) { ... }Description
Defines the section-minor component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The section-minor component's themeable properties
Requires
-
mixin
tokens-layout -
mixin
tokens-heading -
mixin
atoms-rule -
mixin
tokens-text -
external
Brandy::map-deep-get
variables
organisms-section-minor
Since 1.0.0-dev.0$organisms-section-minor: (
'theme': 'light',
'themes': (
'light': (
'heading': color('blue'),
'icon': color('blue'),
'foreground': $color-text-dark,
'background': color('white')
),
'dark': (
'heading': $color-text-light,
'icon': $color-text-light,
'foreground': $color-text-light,
'background': color('blue', 'dark')
)
),
'icon': (
'spacing': 15px
),
'layout': (
'x': $layout-x,
'y': layout($layout-y-min, $layout-y-min)
)
);Description
Defines the base skin of the section-minor component.
Type
variable
placeholders
organisms-section-minor
Since 1.0.0-dev.0%organisms-section-minor { ... }Description
Defines the base structure of the section-minor component.
templates
bio
mixins
templates-bio review
Since 1.0.0-dev.0@mixin templates-bio($custom) { ... }Description
Builds a constructor for the bio component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our bio component
Requires
-
placeholder
templates-bio -
variable
templates-bio -
mixin
templates-bio--theme -
external
Brandy::map-extend
templates-bio--theme
Since 1.0.0-dev.0@mixin templates-bio--theme($skin) { ... }Description
Defines the bio component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The bio component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-bio
Since 1.0.0-dev.0$templates-bio: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the bio component.
Type
variable
placeholders
templates-bio
Since 1.0.0-dev.0%templates-bio { ... }Description
Defines the base structure of the bio component.
exhibition
mixins
templates-exhibition review
Since 1.0.0-dev.0@mixin templates-exhibition($custom) { ... }Description
Builds a constructor for the exhibition component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our exhibition component
Requires
-
placeholder
templates-exhibition -
variable
templates-exhibition -
mixin
templates-exhibition--theme -
external
Brandy::map-extend
templates-exhibition--theme
Since 1.0.0-dev.0@mixin templates-exhibition--theme($skin) { ... }Description
Defines the exhibition component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The exhibition component's themeable properties
Requires
-
mixin
tokens-heading -
mixin
tokens-text -
mixin
tokens-heading -
mixin
tokens-heading -
mixin
atoms-link -
mixin
tokens-layout -
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-exhibition
Since 1.0.0-dev.0$templates-exhibition: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'divider': (
'thickness': 1px,
'color': color('slate', 'light')
),
'date': color('blue'),
'sidenote': (
'heading': color('blue')
)
);Description
Defines the base skin of the exhibition component.
Type
variable
placeholders
templates-exhibition
Since 1.0.0-dev.0%templates-exhibition { ... }Description
Defines the base structure of the exhibition component.
Requires
form
mixins
templates-form review
Since 1.0.0-dev.0@mixin templates-form($custom) { ... }Description
Builds a constructor for the form component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our form component
Requires
-
placeholder
templates-form -
variable
templates-form -
mixin
templates-form--theme -
external
Brandy::map-extend
templates-form--theme
Since 1.0.0-dev.0@mixin templates-form--theme($skin) { ... }Description
Defines the form component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The form component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-form
Since 1.0.0-dev.0$templates-form: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the form component.
Type
variable
placeholders
templates-form
Since 1.0.0-dev.0%templates-form { ... }Description
Defines the base structure of the form component.
gallery
mixins
templates-gallery review
Since 1.0.0-dev.0@mixin templates-gallery($custom) { ... }Description
Builds a constructor for the gallery component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our gallery component
Requires
-
placeholder
templates-gallery -
variable
templates-gallery -
mixin
templates-gallery--theme -
external
Brandy::map-extend
templates-gallery--theme
Since 1.0.0-dev.0@mixin templates-gallery--theme($skin) { ... }Description
Defines the gallery component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The gallery component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-gallery
Since 1.0.0-dev.0$templates-gallery: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the gallery component.
Type
variable
placeholders
templates-gallery
Since 1.0.0-dev.0%templates-gallery { ... }Description
Defines the base structure of the gallery component.
index
mixins
templates-index review
Since 1.0.0-dev.0@mixin templates-index($custom) { ... }Description
Builds a constructor for the index component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our index component
Requires
-
placeholder
templates-index -
variable
templates-index -
mixin
templates-index--theme -
external
Brandy::map-extend
templates-index--theme
Since 1.0.0-dev.0@mixin templates-index--theme($skin) { ... }Description
Defines the index component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The index component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-index
Since 1.0.0-dev.0$templates-index: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the index component.
Type
variable
placeholders
templates-index
Since 1.0.0-dev.0%templates-index { ... }Description
Defines the base structure of the index component.
info
mixins
templates-info review
Since 1.0.0@mixin templates-info($custom) { ... }Description
Builds a constructor for the info component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our info component
Requires
-
placeholder
templates-info -
variable
templates-info -
mixin
templates-info--theme -
external
Brandy::map-extend
templates-info--theme
Since 1.0.0@mixin templates-info--theme($skin) { ... }Description
Defines the info component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The info component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-info
Since 1.0.0$templates-info: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the info component.
Type
variable
placeholders
templates-info
Since 1.0.0%templates-info { ... }Description
Defines the base structure of the info component.
Requires
landing
mixins
templates-landing review
Since 1.0.0-dev.0@mixin templates-landing($custom) { ... }Description
Builds a constructor for the landing component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our landing component
Requires
-
placeholder
templates-landing -
variable
templates-landing -
mixin
templates-landing--theme -
external
Brandy::map-extend
templates-landing--theme
Since 1.0.0-dev.0@mixin templates-landing--theme($skin) { ... }Description
Defines the landing component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The landing component's themeable properties
Requires
-
mixin
tokens-layout -
function
layout -
variable
border-width-s -
variable
rhythm-y -
variable
rhythm-y -
external
Brandy::map-deep-get
variables
templates-landing
Since 1.0.0-dev.0$templates-landing: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 40px
);Description
Defines the base skin of the landing component.
Type
variable
placeholders
templates-landing
Since 1.0.0-dev.0%templates-landing { ... }Description
Defines the base structure of the landing component.
Requires
material
mixins
templates-material review
Since 1.0.0@mixin templates-material($custom) { ... }Description
Builds a constructor for the material component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our material component
Requires
-
placeholder
templates-material -
variable
templates-material -
mixin
templates-material--theme -
external
Brandy::map-extend
templates-material--theme
Since 1.0.0@mixin templates-material--theme($skin) { ... }Description
Defines the material component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The material component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-material
Since 1.0.0$templates-material: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the material component.
Type
variable
placeholders
templates-material
Since 1.0.0%templates-material { ... }Description
Defines the base structure of the material component.
periodicals
mixins
templates-periodicals review
Since 1.0.0-dev.0@mixin templates-periodicals($custom) { ... }Description
Builds a constructor for the periodicals component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our periodicals component
Requires
-
placeholder
templates-periodicals -
variable
templates-periodicals -
mixin
templates-periodicals--theme -
external
Brandy::map-extend
templates-periodicals--theme
Since 1.0.0-dev.0@mixin templates-periodicals--theme($skin) { ... }Description
Defines the periodicals component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The periodicals component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-periodicals
Since 1.0.0-dev.0$templates-periodicals: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the periodicals component.
Type
variable
placeholders
templates-periodicals
Since 1.0.0-dev.0%templates-periodicals { ... }Description
Defines the base structure of the periodicals component.
research-help
mixins
templates-research-help review
Since 1.0.0-dev.0@mixin templates-research-help($custom) { ... }Description
Builds a constructor for the research-help component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our research-help component
Requires
-
placeholder
templates-research-help -
variable
templates-research-help -
mixin
templates-research-help--theme -
external
Brandy::map-extend
templates-research-help--theme
Since 1.0.0-dev.0@mixin templates-research-help--theme($skin) { ... }Description
Defines the research-help component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The research-help component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-research-help
Since 1.0.0-dev.0$templates-research-help: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the research-help component.
Type
variable
placeholders
templates-research-help
Since 1.0.0-dev.0%templates-research-help { ... }Description
Defines the base structure of the research-help component.
research-help-directory
mixins
templates-research-help-directory review
Since 1.0.0-dev.0@mixin templates-research-help-directory($custom) { ... }Description
Builds a constructor for the research-help-directory component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our research-help-directory component
Requires
-
placeholder
templates-research-help-directory -
variable
templates-research-help-directory -
mixin
templates-research-help-directory--theme -
external
Brandy::map-extend
templates-research-help-directory--theme
Since 1.0.0-dev.0@mixin templates-research-help-directory--theme($skin) { ... }Description
Defines the research-help-directory component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The research-help-directory component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-research-help-directory
Since 1.0.0-dev.0$templates-research-help-directory: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the research-help-directory component.
Type
variable
placeholders
templates-research-help-directory
Since 1.0.0-dev.0%templates-research-help-directory { ... }Description
Defines the base structure of the research-help-directory component.
service-directory
mixins
templates-service-directory review
Since 1.0.0-dev.0@mixin templates-service-directory($custom) { ... }Description
Builds a constructor for the service-directory component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our service-directory component
Requires
-
placeholder
templates-service-directory -
variable
templates-service-directory -
mixin
templates-service-directory--theme -
external
Brandy::map-extend
templates-service-directory--theme
Since 1.0.0-dev.0@mixin templates-service-directory--theme($skin) { ... }Description
Defines the service-directory component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The service-directory component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
variables
templates-service-directory
Since 1.0.0-dev.0$templates-service-directory: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the service-directory component.
Type
variable
placeholders
templates-service-directory
Since 1.0.0-dev.0%templates-service-directory { ... }Description
Defines the base structure of the service-directory component.
staff-directory
variables
templates-staff-directory
Since 1.0.0-dev.0$templates-staff-directory: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the staff-directory component.
Type
variable
mixins
templates-staff-directory--theme
Since 1.0.0-dev.0@mixin templates-staff-directory--theme($skin) { ... }Description
Defines the staff-directory component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The staff-directory component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
templates-staff-directory review
Since 1.0.0-dev.0@mixin templates-staff-directory($custom) { ... }Description
Builds a constructor for the staff-directory component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our staff-directory component
Requires
-
placeholder
templates-staff-directory -
variable
templates-staff-directory -
mixin
templates-staff-directory--theme -
external
Brandy::map-extend
placeholders
templates-staff-directory
Since 1.0.0-dev.0%templates-staff-directory { ... }Description
Defines the base structure of the staff-directory component.
subject-librarian-directory
variables
templates-subject-librarian-directory
Since 1.0.0-dev.0$templates-subject-librarian-directory: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the subject-librarian-directory component.
Type
variable
mixins
templates-subject-librarian-directory--theme
Since 1.0.0-dev.0@mixin templates-subject-librarian-directory--theme($skin) { ... }Description
Defines the subject-librarian-directory component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The subject-librarian-directory component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
templates-subject-librarian-directory review
Since 1.0.0-dev.0@mixin templates-subject-librarian-directory($custom) { ... }Description
Builds a constructor for the subject-librarian-directory component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our subject-librarian-directory component
Requires
-
placeholder
templates-subject-librarian-directory -
variable
templates-subject-librarian-directory -
mixin
templates-subject-librarian-directory--theme -
external
Brandy::map-extend
placeholders
templates-subject-librarian-directory
Since 1.0.0-dev.0%templates-subject-librarian-directory { ... }Description
Defines the base structure of the subject-librarian-directory component.
tool
variables
templates-tool
Since 1.0.0$templates-tool: (
'layout': (
'x': $layout-x,
'y': $layout-y
),
'gap': 20px
);Description
Defines the base skin of the tool component.
Type
variable
mixins
templates-tool--theme
Since 1.0.0@mixin templates-tool--theme($skin) { ... }Description
Defines the tool component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The tool component's themeable properties
Requires
-
variable
border-width-s -
external
Brandy::map-deep-get
templates-tool review
Since 1.0.0@mixin templates-tool($custom) { ... }Description
Builds a constructor for the tool component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our tool component
Requires
-
placeholder
templates-tool -
variable
templates-tool -
mixin
templates-tool--theme -
external
Brandy::map-extend
placeholders
templates-tool
Since 1.0.0%templates-tool { ... }Description
Defines the base structure of the tool component.
Tokens
grid
mixins
tokens-grid review
Since 1.0.0-dev.0@mixin tokens-grid($custom) { ... }Description
Builds a constructor for the grid component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our grid component
Requires
-
placeholder
tokens-grid -
variable
tokens-grid -
mixin
tokens-grid--theme -
external
Brandy::map-extend
tokens-grid--theme
Since 1.0.0-dev.0@mixin tokens-grid--theme($skin) { ... }Description
Defines the grid component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The grid component's themeable properties
Requires
-
variable
screens -
external
Brandy::map-deep-get
variables
tokens-grid
Since 1.0.0-dev.0$tokens-grid: (
'gap': (
'cols': 25px,
'rows': 25px
),
'cols': 1fr,
'rows': auto,
'align': (
'cols': start,
'rows': start
)
);Description
Defines the base skin of the grid component.
Type
variable
placeholders
tokens-grid
Since 1.0.0-dev.0%tokens-grid { ... }Description
Defines the base structure of the grid component.
heading
mixins
tokens-heading review
Since 1.0.0@mixin tokens-heading($level, $color: null, $custom: ()) { ... }Description
Builds a constructor for the heading component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$level
|
The intended heading level |
string
|
— none |
$color
|
The desired heading color |
color
|
|
$custom
|
A custom skin for the component |
map
|
|
Output
The native structure and skin of our heading component
Requires
-
placeholder
tokens-heading -
variable
tokens-heading -
mixin
tokens-heading--font -
mixin
tokens-heading--color -
external
Brandy::map-extend
tokens-heading--font
Since 1.0.0@mixin tokens-heading--font($level, $skin) { ... }Description
Defines the heading token's font properties.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$level
|
The intended heading level |
string
|
— none |
$skin
|
The token's skin |
map
|
— none |
Output
The heading component's font property
Requires
-
variable
font-size -
variable
fonts-scale -
external
Brandy::important -
external
Brandy::font -
external
Brandy::map-deep-get
tokens-heading--color
Since 1.0.0@mixin tokens-heading--color($level, $skin, $color: null) { ... }Description
Defines the heading token's color properties.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$level
|
The intended heading level |
string
|
— none |
$skin
|
The token's skin |
map
|
— none |
$color
|
The desired heading color |
color
|
|
Output
The heading component's font property
Requires
-
external
Brandy::default -
external
Brandy::important -
external
Brandy::map-deep-get
variables
tokens-heading
Since 1.0.0$tokens-heading: (
'h1': (
'font-weight': bold,
'font-style': normal,
'line-height': normal,
'letter-spacing': normal,
'text-transform': none,
'color': $color-heading
),
'h1-alt': (
'font-weight': bold,
'font-style': normal,
'line-height': normal,
'letter-spacing': normal,
'text-transform': none,
'color': $color-heading
),
'h1-hero': (
'font-weight': bold,
'font-style': normal,
'line-height': 1.36, // 68px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-light
),
'h2': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.0833, // 78px
'letter-spacing': normal,
'text-transform': none,
'color': $color-heading
),
'h3': (
'font-weight': bold,
'font-style': normal,
'line-height': 1.7083, // 41px,
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark
),
'h4': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.5, // 42px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark
),
'h5': (
'font-weight': normal,
'font-style': normal,
'line-height': normal,
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark
),
'h5-alt': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.6364, // 36px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark
),
'h6': (
'font-weight': bold,
'font-style': normal,
'line-height': 1.6667, // 20px
'letter-spacing': 0.05em,
'text-transform': uppercase,
'color': $color-text-dark
)
);Description
Defines the base skin of the heading component.
Type
variable
Requires
-
variable
color-heading -
variable
color-text-dark
placeholders
tokens-heading
Since 1.0.0%tokens-heading { ... }Description
Defines the base structure of the heading component.
icon
mixins
tokens-icon review
Since 1.0.0@mixin tokens-icon($id, $color: null, $size: null, $custom: (), $pseudo: false) { ... }Description
Builds a constructor for the icon component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$id
|
The ID of the desired icon |
string
|
— none |
$color
|
The desired icon color |
color
|
|
$size
|
The desired icon size |
number
|
|
$custom
|
A custom skin for the component |
map
|
|
$pseudo
|
Whether the target selector is a pseudo element |
boolean
|
|
Output
The native structure and skin of our icon component
Requires
-
placeholder
tokens-icon -
variable
tokens-icon -
mixin
tokens-icon--icon -
external
Brandy::map-extend
tokens-icon--icon
Since 1.0.0@mixin tokens-icon--icon($skin) { ... }Description
Defines the icon token's icon.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The icon token's themeable properties
Requires
-
function
icon -
external
Brandy::map-deep-get
variables
tokens-icon
Since 1.0.0$tokens-icon: (
'color': null,
'size': null
);Description
Defines the base skin of the icon component.
Type
variable
placeholders
tokens-icon
Since 1.0.0%tokens-icon { ... }Description
Defines the base structure of the icon component.
layout
mixins
tokens-layout review
Since 1.0.0@mixin tokens-layout($custom) { ... }Description
Builds a constructor for the layout component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our layout component
Requires
-
placeholder
tokens-layout -
variable
tokens-layout -
mixin
tokens-layout--theme -
external
Brandy::map-extend
tokens-layout--theme
Since 1.0.0@mixin tokens-layout--theme($skin) { ... }Description
Defines the layout component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The layout component's themeable properties
Requires
-
variable
transition-duration -
variable
transition-timing -
external
Brandy::map-deep-get
variables
tokens-layout
Since 1.0.0$tokens-layout: (
'x': $layout-x,
'y': $layout-y
);Description
Defines the base skin of the layout component.
Type
variable
placeholders
tokens-layout
Since 1.0.0%tokens-layout { ... }Description
Defines the base structure of the layout component.
reveal
mixins
tokens-reveal review
Since 1.0.0-dev.0@mixin tokens-reveal($custom) { ... }Description
Builds a constructor for the reveal component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$custom
|
A custom skin for the component |
map
|
— none |
Output
The native structure and skin of our reveal component
Requires
-
placeholder
tokens-reveal -
variable
tokens-reveal -
mixin
tokens-reveal--theme -
external
Brandy::map-extend
tokens-reveal--theme
Since 1.0.0-dev.0@mixin tokens-reveal--theme($skin) { ... }Description
Defines the reveal component theme.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$skin
|
The component's skin |
map
|
— none |
Output
The reveal component's themeable properties
Requires
-
external
Brandy::map-deep-get
variables
tokens-reveal
Since 1.0.0-dev.0$tokens-reveal: (
'transition': (
'duration': $transition-duration,
'timing': $transition-timing
)
);Description
Defines the base skin of the reveal component.
Type
variable
placeholders
tokens-reveal
Since 1.0.0-dev.0%tokens-reveal { ... }Description
Defines the base structure of the reveal component.
Requires
-
variable
rhythm-y
text
variables
tokens-text
Since 1.0.0$tokens-text: (
'body': (
'font-weight': normal,
'font-style': normal,
'line-height': $font-line-height,
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark,
'text-align': left
),
'body-alt': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.6429, // 23px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark,
'text-align': left
),
'lead': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.5, // 42px
'letter-spacing': normal,
'text-transform': none,
'color': color('blue', 'mid'),
'text-align': left
),
'blockquote': (
'font-weight': bold,
'font-style': normal,
'line-height': normal,
'letter-spacing': normal,
'text-transform': none,
'color': color('blue', 'mid'),
'text-align': center
),
'listing': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.6364, // 36px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark,
'text-align': left
),
'accent': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.6111, // 29px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark,
'text-align': left
),
'button': (
'font-weight': bold,
'font-style': normal,
'line-height': 1.6364, // 18px
'letter-spacing': .05em,
'text-transform': uppercase,
'color': $color-text-dark,
'text-align': left
),
'badge': (
'font-weight': bold,
'font-style': normal,
'line-height': 1.6667, // 20px
'letter-spacing': .05em,
'text-transform': uppercase,
'color': $color-text-dark,
'text-align': left
),
'label': (
'font-weight': bold,
'font-style': normal,
'line-height': 1.2, // 12px
'letter-spacing': .11em,
'text-transform': uppercase,
'color': color('blue', 'dark'),
'text-align': left
),
'data': (
'font-weight': normal,
'font-style': normal,
'line-height': 1.6667, // 20px
'letter-spacing': normal,
'text-transform': none,
'color': $color-text-dark,
'text-align': left
),
'caption': (
'font-weight': normal,
'font-style': italic,
'line-height': 1.5, // 24px,
'text-transform': none,
'color': $color-text-dark,
'text-align': left
)
);Description
Defines the base skin of the text component.
Type
variable
Requires
-
variable
colors -
variable
color-text-dark -
external
Brandy::color
mixins
tokens-text--font
Since 1.0.0@mixin tokens-text--font($type, $skin) { ... }Description
Defines the text token's font properties.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$type
|
The intended text type |
string
|
— none |
$skin
|
The token's skin |
map
|
— none |
Output
The heading component's font property
Requires
-
variable
font-size -
variable
fonts-scale -
external
Brandy::important -
external
Brandy::font -
external
Brandy::map-deep-get
tokens-text--color
Since 1.0.0@mixin tokens-text--color($type, $skin, $color: null) { ... }Description
Defines the text token's color properties.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$type
|
The intended text type |
string
|
— none |
$skin
|
The token's skin |
map
|
— none |
$color
|
The desired text color |
color
|
|
Output
The text component's font property
Requires
-
external
Brandy::default -
external
Brandy::important -
external
Brandy::map-deep-get
tokens-text review
Since 1.0.0@mixin tokens-text($type, $color: null, $custom: ()) { ... }Description
Builds a constructor for the text component.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$type
|
The intended text type |
string
|
— none |
$color
|
The desired text color |
color
|
|
$custom
|
A custom skin for the component |
map
|
|
Output
The native structure and skin of our text component
Requires
-
placeholder
tokens-text -
variable
tokens-text -
mixin
tokens-text--font -
mixin
tokens-text--color -
external
Brandy::map-extend
placeholders
tokens-text
Since 1.0.0%tokens-text { ... }Description
Defines the base structure of the text component.
Utilities
functions
functions
icon
Since 1.0.0@function icon($id, $color: null, $size: null) { ... }Description
Dynamically retrieves an icon from the icon folder by icon ID. Optionally allows the icon to be recolored or resized.
Parameters
| function parameter Name | function parameter Description | function parameter Type | function parameter Default value |
|---|---|---|---|
$id
|
The ID of the icon |
string
|
— none |
$color
|
The desired color of the icon |
color
|
|
$size
|
The desired size of the icon, either a single number or list of numbers representing width and height |
number or list
|
|
Returns
The icon's path
Requires
-
external
Brandy::strip-unit -
external
Brandy::config -
external
Brandy::is-color -
external
Brandy::is-null -
external
Brandy::is-list -
external
Brandy::to-hex
icon-url
Since 1.0.0@function icon-url($id, $color: null, $size: null) { ... }Description
Dynamically retrieves an icon from the icon folder by icon ID. Optionally allows the icon to be recolored or resized.
Parameters
| function parameter Name | function parameter Description | function parameter Type | function parameter Default value |
|---|---|---|---|
$id
|
The ID of the icon |
string
|
— none |
$color
|
The desired color of the icon |
color
|
|
$size
|
The desired size of the icon, either a single number or list of numbers representing width and height |
number or list
|
|
Returns
The icon's path as a URL
Requires
-
function
icon
selector-excludes
Since 1.0.0@function selector-excludes($excludes...) { ... }Description
Builds a series of :not expressions that can be used to exclude selectors from another.
Parameters
| function parameter Name | function parameter Description | function parameter Type | function parameter Default value |
|---|---|---|---|
$excludes
|
One or more expressions to be excluded from the target selector |
arglist
|
— none |
Returns
A :not exclusion expression
mixins
mixins
breakpoints
Since 1.0.0@mixin breakpoints($breakpoints...) { ... }Description
Build multiple media queries for multiple breakpoints at the same time.
Parameters
| mixin parameter Name | mixin parameter Description | mixin parameter Type | mixin parameter Default value |
|---|---|---|---|
$breakpoints
|
The breakpoints for the media queries |
arglist
|
— none |
Requires
-
external
Breakpoint::breakpoint
breakpoint-s
Since 1.0.0@mixin breakpoint-s() { ... }Description
A breakpoint shorthand to create a media query for small screens.
Parameters
None.
Requires
-
variable
screens -
external
Breakpoint::breakpoint -
external
Brandy::screen
breakpoint-m
Since 1.0.0@mixin breakpoint-m() { ... }Description
A breakpoint shorthand to create a media query for medium screens.
Parameters
None.
Requires
-
variable
screens -
external
Breakpoint::breakpoint -
external
Brandy::screen
breakpoint-l
Since 1.0.0@mixin breakpoint-l() { ... }Description
A breakpoint shorthand to create a media query for large screens.
Parameters
None.
Requires
-
variable
screens -
external
Breakpoint::breakpoint -
external
Brandy::screen
breakpoint-xl
Since 1.0.0@mixin breakpoint-xl() { ... }Description
A breakpoint shorthand to create a media query for extra-large screens.
Parameters
None.
Requires
-
variable
screens -
external
Breakpoint::breakpoint -
external
Brandy::screen
breakpoint-s-m
Since 1.0.0@mixin breakpoint-s-m() { ... }Description
A breakpoint shorthand to create a media query for small and medium screens.
Parameters
None.
Requires
-
variable
screens -
mixin
breakpoints -
external
Brandy::screen
breakpoint-s-m-l
Since 1.0.0@mixin breakpoint-s-m-l() { ... }Description
A breakpoint shorthand to create a media query for small, medium, and large screens.
Parameters
None.
Requires
-
variable
screens -
mixin
breakpoints -
external
Brandy::screen
breakpoint-m-l
Since 1.0.0@mixin breakpoint-m-l() { ... }Description
A breakpoint shorthand to create a media query for medium and large screens.
Parameters
None.
Requires
-
variable
screens -
mixin
breakpoints -
external
Brandy::screen
breakpoint-m-l-xl
Since 1.0.0@mixin breakpoint-m-l-xl() { ... }Description
A breakpoint shorthand to create a media query for medium, large, and extra-large screens.
Parameters
None.
Requires
-
variable
screens -
mixin
breakpoints -
external
Brandy::screen
breakpoint-l-xl
Since 1.0.0@mixin breakpoint-l-xl() { ... }Description
A breakpoint shorthand to create a media query for large and extra large screens.
Parameters
None.
Requires
-
variable
screens -
mixin
breakpoints -
external
Brandy::screen
v-transition-from
Since 1.0.0@mixin v-transition-from() { ... }Description
Helps create Vue.js transitions by setting the from state.
Parameters
None.
v-transition-to
Since 1.0.0@mixin v-transition-to() { ... }Description
Helps create Vue.js transitions by setting the to state.
Parameters
None.
v-transition-in-start
Since 1.0.0@mixin v-transition-in-start() { ... }Description
Helps create Vue.js entrance transitions by setting the starting state.
Parameters
None.
v-transition-in-end
Since 1.0.0@mixin v-transition-in-end() { ... }Description
Helps create Vue.js entrance transitions by setting the ending state.
Parameters
None.
v-transition-in-active
Since 1.0.0@mixin v-transition-in-active() { ... }Description
Helps create Vue.js entrance transitions by setting the active state.
Parameters
None.
v-transition-out-start
Since 1.0.0@mixin v-transition-out-start() { ... }Description
Helps create Vue.js exit transitions by setting the starting state.
Parameters
None.
v-transition-out-end
Since 1.0.0@mixin v-transition-out-end() { ... }Description
Helps create Vue.js exit transitions by setting the ending state.
Parameters
None.
v-transition-out-active
Since 1.0.0@mixin v-transition-out-active() { ... }Description
Helps create Vue.js exit transitions by setting the active state.
Parameters
None.
v-transition
Since 1.0.0@mixin v-transition() { ... }Description
Helps create Vue.js transitions by setting the start and end state.
Parameters
None.
v-transition-active
Since 1.0.0@mixin v-transition-active() { ... }Description
Helps create Vue.js transitions by setting the active state.
Parameters
None.
General
functions
layout-scale
Since 1.0.0@function layout-scale($min, $max, $breakpoints: map-keys($screens)) { ... }Description
Creates a new layout scale across breakpoints ranging from min to max layout sizes.
Parameters
| function parameter Name | function parameter Description | function parameter Type | function parameter Default value |
|---|---|---|---|
$min
|
The minimum allowed layout size for the smallest breakpoint |
number
|
— none |
$max
|
The maximum allowed layout size for the largest breakpoint |
number
|
— none |
$breakpoints
|
The breakpoints that the layout should scale to. |
list
|
|
Returns
A list of layout sizes for each breakpoint.
Requires
-
variable
screens -
external
Brandy::numeric-scale
layout-breakpoints
Since 1.0.0@function layout-breakpoints($scale, $breakpoints: map-keys($screens)) { ... }Description
Maps a layout scale to a list of breakpoints.
Parameters
| function parameter Name | function parameter Description | function parameter Type | function parameter Default value |
|---|---|---|---|
$scale
|
A layout scale. |
list
|
— none |
$breakpoints
|
The breakpoints that the layout should scale to. |
list
|
|
Returns
A map of layout sizes for each breakpoint.
Requires
-
variable
screens -
external
Brandy::map-combine
layout
Since 1.0.0@function layout($min, $max, $breakpoints: map-keys($screens)) { ... }Description
Generates a layout map given min and max layout sizes for a range of breakpoints.
Parameters
| function parameter Name | function parameter Description | function parameter Type | function parameter Default value |
|---|---|---|---|
$min
|
The minimum allowed layout size for the smallest breakpoint |
number
|
— none |
$max
|
The maximum allowed layout size for the largest breakpoint |
number
|
— none |
$breakpoints
|
The breakpoints that the layout should scale to. |
list
|
|
Returns
A map of layout sizes for each breakpoint.
Requires
-
variable
screens -
function
layout-scale -
function
layout-breakpoints